<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="#">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="#">Trending now</a></li>
                        <li><a class="sub-nav-link" href="#">For you</a></li>
                        <li><a class="sub-nav-link" href="#">Sets by theme</a></li>
                        <li><a class="sub-nav-link" href="#">Sets by ages</a></li>
                        <li><a class="sub-nav-link" href="#">Sets by price</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="#">For you</a></li>
                        <li><a class="sub-nav-link" href="#">Bricks by catagory</a></li>
                        <li><a class="sub-nav-link" href="#">Bricks by price</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 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-component></basket-component>
        </ul>
    </nav>
</div>