<div class="navbar-container">
    <nav class="navbar">
        <div class="logo"><a href="/"><img src="/res/logo.svg" height="80em" alt="logo"></a></div>
        
        <div class="push-right">
            <!-- https://jonsuh.com/hamburgers/ -->
            <button id="menu-toggler" class="hamburger">
                <span class="hamburger-line hamburger-line-top"></span>
                <span class="hamburger-line hamburger-line-middle"></span>
                <span class="hamburger-line hamburger-line-bottom"></span>
            </button>

            <ul class="primary-menu nav-menu">
                <li class="menu-item current-menu-item"><a class="nav-link" href="/featured/new/">New</a></li>
                <li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
                    <!-- TODO: Going to need to dynamically generate this -->
                    <ul class = "sub-nav">
                        <li><a class="sub-nav-link" href="/featured/">Trending now</a></li>
                        <li><a class="sub-nav-link" href="/search?type=set&tag=star%20wars">Star Wars Sets</a></li>
                        <li><a class="sub-nav-link" href="/search?type=set&tag=harry%20potter">Harry Potter Sets</a></li>
                        <li><a class="sub-nav-link" href="/search?type=set&tag=friends">Friends Sets</a></li>
                        <li><a class="sub-nav-link" href="/search?type=set&tag=creator">Creator Sets</a></li>
                        <li><a class="sub-nav-link" href="/search?type=set&tag=minecraft">Minecraft Sets</a></li>
                        <li><a class="sub-nav-link" href="/search?type=set&tag=disney">Disney Sets</a></li>
                    </ul>
                </li>
                <li class="menu-item dropdown"><a class="nav-link"  href="#">Bricks▾</a>
                    <ul class="sub-nav" >
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=technic">Technic Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=minifigure">Minifigure Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=animal">Animal Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=food">Food Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=brick">Basic Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=tile">Tile Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=slope">Slope Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=wedge">Wedge Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=bracket">Bracket Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=arch">Arch Bricks</a></li>
                        <li><a class="sub-nav-link" href="/search?type=brick&tag=window">Window Bricks</a></li>
                    </ul>
                </li>
                <li class="account-item menu-item"><a class="account-button nav-link" href="#">My Account</a>
                <li class="menu-item stock-mode" style="display: none;">
                    STOCK MODE
                    <label class="switch">
                        <input class="stock-slider" type="checkbox">
                        <span class="slider round"></span>
                    </label>
                </li>
            </ul>
        </div>
        <ul class="secondary-menu push-down">
            <span class="search-wrapper">
                <search-component style="width: 100%;"></search-component>
            </span>

            <!-- <img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="45px" stroke="#222" stroke-width="2px" alt=""> -->
            <basket-popout-component></basket-popout-component>
            
            <accessability-popout-component></accessability-popout-component>            
        </ul>
    </nav>
</div>