<header class="navbar">
    <a href="{{ route('index') }}" class="logo">BuzzStream</a>
    <div class="menu-toggle">☰</div>
    <!-- <div class="menu-toggle">&#9776;</div> -->


    <nav class="nav-links">
        <a href="{{ route('index') }}" class="active" title="home">Home</a>
        @foreach($navCategories as $category)
            <a href="{{ route('category.show', $category->slug) }}" title="{{ $category->category_name }}">
                {{ $category->category_name }}
            </a>
        @endforeach
    </nav>

    <div class="nav-icons">
        <div class="search-wrapper">
            <img src="{{ asset('assets/images/search.webp') }}" id="searchToggle" class="search-icon" alt="Search">
            <div id="searchBox" class="search-dropdown">
                <form action="{{ route('search') }}" method="GET">
                    <div class="search-inner">

                        <input type="text" name="q" placeholder="Search ..." required autofocus>

                        <button type="submit">➜</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- <span>☀️</span> -->
    </div>


</header>

<hr class="nav-divider">





<div class="category-bar">
    @foreach($otherCategories as $category)
        <a href="{{ route('category.show', $category->slug) }}" title="{{ $category->category_name }}">
            {{ $category->category_name }}
        </a>

        @if(!$loop->last)
            <span>|</span>
        @endif
    @endforeach
</div>
