Search Focused Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search-Focused Navbar (Corrected)</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Functional Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff; --color-text-primary: #1c1c1e;
            --color-text-secondary: #8a8a8e; --color-primary: #007aff;
            --color-border: #d1d1d6; --color-input-bg: #f2f2f2;
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --navbar-height: 70px; --container-width: 1140px;
            --transition-speed: 0.3s; --border-radius: 8px;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); background-color: #f9f9f9; }
        .content { height: 200vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1.5rem; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-primary); }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar { position: sticky; top: 0; z-index: 1000; height: var(--navbar-height); display: flex; align-items: center; background-color: var(--color-background); border-bottom: 1px solid var(--color-border); }
        .navbar__container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; gap: 1rem; }
        .navbar__brand { font-size: 1.5rem; font-weight: 600; flex-shrink: 0; transition: opacity var(--transition-speed) ease, width var(--transition-speed) ease, margin-right var(--transition-speed) ease, padding var(--transition-speed) ease; }
        .navbar__actions { display: flex; align-items: center; gap: 0.5rem; }
        
        /* Mobile menu toggle button */
        .navbar__toggle { display: block; border: none; background: transparent; cursor: pointer; font-size: 1.5rem; }
        
        /* The container for mobile navigation links */
        .navbar__menu {
            display: none; /* Hidden by default */
            position: absolute; top: var(--navbar-height);
            left: 0; width: 100%; background-color: var(--color-background);
            border-top: 1px solid var(--color-border);
        }

/* Show the menu when it has the .is-active class */
        .navbar__menu.is-active { display: block; }
        .navbar__menu a { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); }

/*
        ========================================
        Search Form Styles & Animation
        ========================================
        */
        .search-form { display: flex; align-items: center; justify-content: flex-end; position: relative; }
        .search-form__input { width: 0; padding: 0.75rem 0; border: none; background: transparent; font-size: 1rem; opacity: 0; visibility: hidden; transition: all var(--transition-speed) ease; }
        .search-form__input:focus { outline: none; }
        .search-form__submit { background: transparent; border: none; cursor: pointer; padding: 0.5rem; display: flex; }
        .search-form__submit svg { width: 24px; height: 24px; color: var(--color-text-secondary); }
        .search-form.is-open .search-form__input { width: 240px; padding-right: 1rem; opacity: 1; visibility: visible; background-color: var(--color-input-bg); border-radius: var(--border-radius); padding-left: 1rem; }

/*
        ========================================
        Desktop & Responsive Styles
        ========================================
        */        
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu {
                display: flex; /* Override mobile display:none */
                position: static; border: none; /* Reset mobile absolute positioning */
                flex-grow: 1; align-items: center;
            }
            .navbar__list { display: flex; gap: 1.5rem; }
            .navbar__menu a { border: none; padding: 0; }
        }
        
        /*
        ========================================
        Mobile-Specific Layout Changes on Search
        ========================================
        Mobile layout changes on search open.
        */
        .navbar__brand.is-hidden-on-search,
        .navbar__toggle.is-hidden-on-search { opacity: 0; width: 0; margin-right: -1rem; padding: 0; }
        .search-form.is-open { flex-grow: 1; }
    </style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand" id="navbar-brand">Brand</a>
            <nav class="navbar__menu" id="navbar-menu">
                <ul class="navbar__list">
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">Deals</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
            <div class="navbar__actions">
                <form class="search-form" id="search-form" role="search">
                    <input class="search-form__input" type="search" id="search-input" placeholder="Search articles..." aria-label="Search">
                    <button class="search-form__submit" id="search-toggle" type="submit" aria-label="Submit search">
                        <svg viewBox="0 0 24 24"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg>                    
                </form>
                <button class="navbar__toggle" id="navbar-toggle" aria-label="Open navigation menu" aria-expanded="false" aria-controls="navbar-menu">&#x2630;</button>
            </div>
        </div>
    </header>
    <main class="content">
        <h1>Search-Focused Navbar</h1>
        <p>Click the search icon in the header to expand the search bar.</p>
    </main>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchForm = document.getElementById('search-form');
        const searchToggle = document.getElementById('search-toggle');
        const searchInput = document.getElementById('search-input');
        const navbarBrand = document.getElementById('navbar-brand');
        
        // Mobile menu elements and logic
        const mobileMenuToggle = document.getElementById('navbar-toggle');
        const mobileMenu = document.getElementById('navbar-menu');
        
        if (!searchForm || !searchToggle || !searchInput || !mobileMenuToggle || !mobileMenu) return;
        
        // Search bar logic
        searchToggle.addEventListener('click', function(event) {
            if (!searchForm.classList.contains('is-open')) {
                event.preventDefault(); searchForm.classList.add('is-open');
                const isMobileView = getComputedStyle(mobileMenuToggle).display !== 'none';
                if (isMobileView) {
                    if (navbarBrand) navbarBrand.classList.add('is-hidden-on-search');
                    if (mobileMenuToggle) mobileMenuToggle.classList.add('is-hidden-on-search');
                }
                searchInput.focus();
            } else if (searchInput.value === '') {
                 event.preventDefault(); closeSearch();
            }
        });
        
        function closeSearch() {
            searchForm.classList.remove('is-open');
            if (navbarBrand) navbarBrand.classList.remove('is-hidden-on-search');
            if (mobileMenuToggle) mobileMenuToggle.classList.remove('is-hidden-on-search');
        }

document.addEventListener('click', function(event) {
            if (!searchForm.contains(event.target) && searchForm.classList.contains('is-open')) {
                closeSearch();
            }
        });

// Mobile menu toggle functionality
        mobileMenuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('is-active');
            const isExpanded = mobileMenu.classList.contains('is-active');
            this.setAttribute('aria-expanded', isExpanded);
        });
    });
    </script>
</body>
</html>