The-Student-Kitchen/header.html at main · Scout-NU/The-Student-Kitchen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<header class="site-header">
    <div class="header-container">
        <div class="header-left">
            <a href="index.html" class="logo-link">
                <!-- ========== MODIFY LOGO HERE: assets/SecondaryOrange.svg ========== -->
                <img src="assets/SecondaryOrange.svg" alt="The Student Kitchen" class="header-logo">
                <!-- ===================================================== -->
            </a>
        </div>

        <nav class="main-nav" id="mainNav">
            <button class="menu-close" id="menuClose" aria-label="Close menu">×</button>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="programs.html">Programs</a></li>
                <li><a href="mission.html">Our Mission</a></li>
                <li><a href="community-impact.html">Community Impact</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>

        <div class="header-right">
            <button class="search-icon-btn" aria-label="Search" id="searchToggleBtn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>
                    <path d="m20 20-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </button>
            <a href="contact.html#donate" class="donate-btn">DONATE</a>

            <button class="hamburger" id="hamburger" aria-label="Toggle menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>
    <!-- Remove extra </div> here -->
    <div class="search-bar-container" id="searchBarContainer">
        <div class="search-bar-wrapper">
            <input type="text" class="search-input" id="searchInput" placeholder="Search..." aria-label="Search">
            <button class="search-close-btn" id="searchCloseBtn" aria-label="Close search">×</button>
        </div>
        <div class="search-results" id="searchResults"></div>
    </div>
</header>