source: Components/Header.html

<link rel="stylesheet" href="../CSS/Header.css">

<div class="top-banner">
    <button class="banner-button prev-button">
      <svg class="banner-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M15 18l-6-6 6-6"/>
      </svg>
    </button>
    
    <div class="banner-content">
      <div class="banner-message active">Читај!</div>
      <div class="banner-message">Вратете ги книгите на време и избегнете казни за доцнење!</div>
      <div class="banner-message">Погледнете ги новите наслови во нашата библиотека!</div>
      <div class="banner-message">Изнајмете книги од сите жанрови!</div>
    </div>

    <button class="banner-button next-button">
      <svg class="banner-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M9 18l6-6-6-6"/>
      </svg>
    </button>
  </div>

<header class="header">
<div class="header-main">
  <div style="display: flex; align-items: center;">
    <div class="logo" onclick="redirectToHome()">Book-Tracker</div>
  </div>

  <div class="search-container">
    <form action="Search.php" method="GET" id="searchForm">
        <input type="text" 
               name="search" 
               class="search-input" 
               placeholder="Search by Title, Author, Keyword or ISBN"
               required>
        <svg class="search-icon" 
             viewBox="0 0 24 24" 
             fill="none" 
             stroke="currentColor" 
             stroke-width="2" 
             onclick="document.getElementById('searchForm').submit();"
             style="cursor: pointer;">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
    </form>
</div>


  <!--
  <div class="search-container">
    <input type="text" class="search-input" placeholder="Search by Title, Author, Keyword or ISBN">
    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </div>-->
</form>

  <div class="header-icons">
    <!-- Profile -->
      <a href="Profile.php" style="text-decoration: none;">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
        <circle cx="12" cy="7" r="4"></circle>
      </svg>
      </a>
      <!-- CART -->
      <a href="Cart.php" style="text-decoration: none;">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="9" cy="21" r="1"></circle>
        <circle cx="20" cy="21" r="1"></circle>
        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
      </svg>
    </a>
  </div>
  <button class="menu-button">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <line x1="3" y1="12" x2="21" y2="12"></line>
      <line x1="3" y1="6" x2="21" y2="6"></line>
      <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </button>
  
</div>

<nav class="nav-menu">
    <div class="nav-item has-dropdown">
      <div class="nav-link" onclick="redirectToBooks()">Books</div>
      <div class="dropdown-menu">
        <div class="dropdown-section">
          <h3>Browse Categories</h3>
          <div class="dropdown-content">
            <a href="#" class="dropdown-item">Art & Architecture</a>
            <a href="#" class="dropdown-item">Biography</a>
            <a href="#" class="dropdown-item">Business</a>
            <a href="#" class="dropdown-item">Children's Books</a>
            <a href="#" class="dropdown-item">Cookbooks</a>
            <a href="#" class="dropdown-item">History</a>
            <a href="#" class="dropdown-item">Mystery & Crime</a>
            <a href="#" class="dropdown-item">Romance</a>
          </div>
        </div>
      </div>
    </div>
  
    <div class="nav-item has-dropdown">
      <div class="nav-link" onclick="redirectToFiction()">Fiction</div>
    </div>
  
    <div class="nav-item has-dropdown">
      <div class="nav-link" onclick="redirectToFantasy()">Fantasy</div>
    </div>
  
    <div class="nav-item has-dropdown">
      <div class="nav-link" onclick="redirectToNewBooks()">New Releases</div>
    </div>
  </nav>
</header>

<script src="../Scripts/Header.js"></script>
<script>
  function redirectToHome() {
    window.location.href = './HomePage.php';
  }
  function redirectToBooks() {
    window.location.href = './Books.php?';
  }
  function redirectToFiction() {
    window.location.href = './Books.php?genres%5B%5D=Fiction';
  }
  function redirectToFantasy() {
    window.location.href = './Books.php?genres%5B%5D=Fantasy';
  }
  function redirectToNewBooks() {
    window.location.href = './Books.php?year_from=2020&year_to=2024';
  }
</script>