{% include '_load_fonts' %}
<span class="drawer drawer--left">
  <header id="header" class="r9g__header js__r9g__header">
    <div class="hidden-md computer_nav">
      <div class="header_logo text-center">
        <!-- logo start -->
        <div class="container">
          <div class="relative">
            <nav class="logo">
              {% if settings.navbar_image_logo %}
                <a href="/">
                  <img src="{{ 'img/navbar_logo.png' | asset_url }}" height="50" width="auto" alt="logo">
                </a>
              {% endif %}
            </nav>
            <!-- logo end -->
            <!-- tool-nav start -->
              {% include 'tool_nav' %}
            <!-- tool-nav end -->
          </div>
        </div>
      </div>
      <div class="header_nav">
        <div class="container text-center">
          <div class="relative">
            <!-- main-nav start -->
              {% include 'main_nav' %}
            <!-- main-nav end -->
          </div>
        </div>
      </div>
    </div>
    <div class="visible-md relative">
      <!-- mobile-nav start -->
      <nav class="mobile-nav">
        <ul>
          <li class="sidebar-menu-icon drawer-toggle">
            <svg class="menu-svg" xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 0 50 50">
              <path d="M51.529,3H1.5C0.672,3,0,2.329,0,1.5S0.672,0,1.5,0h50.029c0.828,0,1.5,0.671,1.5,1.5
                S52.357,3,51.529,3z"/>
              <path d="M51.529,24.023H1.5c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h50.029
                c0.828,0,1.5,0.672,1.5,1.5S52.357,24.023,51.529,24.023z"/>
              <path d="M29.101,45.046H1.5c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h27.601
                c0.828,0,1.5,0.672,1.5,1.5S29.929,45.046,29.101,45.046z"/>
            </svg>
          </li>
          {% if settings.navbar_image_logo %}
            <li class="logo">
                <a href="/" class="img-flex d-flex justify-content-start">
                  <img src="{{ 'img/navbar_logo.png' | asset_url }}" height="50" width="auto" alt="logo">
                </a>
            </li>
          {% endif %}
          {% if shop.customer_accounts_enabled %}
            <li class="member">
              <a id="customer-phone-nav-icon" href="/account/login">
                <!--<svg class="member-svg" xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 0 40 50">-->
                <!--  <path d="M26.133,22.686c3.417-2.192,5.692-6.016,5.692-10.368C31.825,5.526,26.299,0,19.507,0S7.188,5.526,7.188,12.318c0,4.352,2.275,8.176,5.692,10.368C5.381,25.098,0,31.457,0,38.926v1.627C0,44.659,3.716,48,8.283,48h22.448c4.567,0,8.283-3.341,8.283-7.447v-1.627C39.014,31.457,33.632,25.098,26.133,22.686z M10.188,12.318  C10.188,7.18,14.368,3,19.507,3s9.319,4.18,9.319,9.318c0,5.139-4.181,9.319-9.319,9.319S10.188,17.457,10.188,12.318zM36.014,40.553c0,2.452-2.37,4.447-5.283,4.447H8.283C5.37,45,3,43.005,3,40.553v-1.627c0-7.879,7.405-14.289,16.506-14.289c9.102,0,16.507,6.41,16.507,14.289L36.014,40.553L36.014,40.553z"/>-->
                <!--</svg>-->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.71 12.7096C16.6904 11.9383 17.406 10.8806 17.7572 9.68358C18.1085 8.4866 18.0779 7.2099 17.6698 6.0311C17.2617 4.85231 16.4963 3.83003 15.4801 3.10649C14.4639 2.38296 13.2474 1.99414 12 1.99414C10.7525 1.99414 9.53611 2.38296 8.51993 3.10649C7.50374 3.83003 6.73834 4.85231 6.33021 6.0311C5.92208 7.2099 5.89151 8.4866 6.24276 9.68358C6.59401 10.8806 7.3096 11.9383 8.29 12.7096C6.61007 13.3827 5.14428 14.499 4.04889 15.9396C2.95349 17.3801 2.26956 19.0909 2.07 20.8896C2.05555 21.021 2.06711 21.1538 2.10402 21.2807C2.14093 21.4075 2.20246 21.5259 2.28511 21.629C2.45202 21.8371 2.69478 21.9705 2.96 21.9996C3.22521 22.0288 3.49116 21.9514 3.69932 21.7845C3.90749 21.6176 4.04082 21.3749 4.07 21.1096C4.28958 19.1548 5.22168 17.3494 6.68822 16.0384C8.15475 14.7274 10.0529 14.0027 12.02 14.0027C13.9871 14.0027 15.8852 14.7274 17.3518 16.0384C18.8183 17.3494 19.7504 19.1548 19.97 21.1096C19.9972 21.3554 20.1144 21.5823 20.2991 21.7467C20.4838 21.911 20.7228 22.0011 20.97 21.9996H21.08C21.3421 21.9695 21.5817 21.8369 21.7466 21.6309C21.9114 21.4248 21.9881 21.162 21.96 20.8996C21.7595 19.0958 21.0719 17.3806 19.9708 15.9378C18.8698 14.4951 17.3969 13.3791 15.71 12.7096V12.7096ZM12 11.9996C11.2089 11.9996 10.4355 11.765 9.77772 11.3255C9.11992 10.886 8.60723 10.2613 8.30448 9.53037C8.00173 8.79947 7.92251 7.9952 8.07686 7.21928C8.2312 6.44335 8.61216 5.73062 9.17157 5.17121C9.73098 4.6118 10.4437 4.23084 11.2196 4.0765C11.9956 3.92215 12.7998 4.00137 13.5307 4.30412C14.2616 4.60687 14.8863 5.11956 15.3259 5.77736C15.7654 6.43515 16 7.20851 16 7.99964C16 9.0605 15.5786 10.0779 14.8284 10.8281C14.0783 11.5782 13.0609 11.9996 12 11.9996Z" fill="black"/>
                </svg>

              </a>
            </li>
          {% endif %}
          {% if shop.cart_enabled %}
            <li class="cart">
              <a href="/cart">
                <!--<svg class="cart-svg" xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 0 60 50">-->
                <!--  <path d="M53.651,6.955c-0.285-0.343-0.708-0.542-1.154-0.542H13.471L12.3,1.173-->
                <!--    C12.147,0.487,11.539,0,10.836,0H1.5C0.671,0,0,0.671,0,1.5S0.672,3,1.5,3h8.134l6.593,29.503c0.153,0.686,0.762,1.173,1.464,1.173-->
                <!--    h27.882c0.828,0,1.5-0.672,1.5-1.5s-0.672-1.5-1.5-1.5h-26.68l-0.336-1.503l30.61-1.59c0.691-0.036,1.269-0.541,1.396-1.222-->
                <!--    l3.408-18.172C54.054,7.75,53.937,7.298,53.651,6.955z M47.832,24.648l-29.938,1.554l-3.752-16.79h36.547L47.832,24.648z"/>-->
                <!--  <path d="M27.829,19.456h9.873c0.828,0,1.5-0.671,1.5-1.5s-0.672-1.5-1.5-1.5h-9.873-->
                <!--    c-0.829,0-1.5,0.671-1.5,1.5S27,19.456,27.829,19.456z"/>-->
                <!--  <path d="M22.174,36.563c-3.153,0-5.718,2.565-5.718,5.718S19.021,48,22.174,48s5.719-2.565,5.719-5.719-->
                <!--    C27.893,39.129,25.328,36.563,22.174,36.563z M22.174,45c-1.499,0-2.718-1.22-2.718-2.719s1.219-2.718,2.718-2.718-->
                <!--    s2.719,1.219,2.719,2.718S23.673,45,22.174,45z"/>-->
                <!--  <path d="M44.456,36.563c-3.153,0-5.719,2.565-5.719,5.718S41.302,48,44.456,48s5.719-2.565,5.719-5.719-->
                <!--    C50.175,39.129,47.609,36.563,44.456,36.563z M44.456,45c-1.499,0-2.719-1.22-2.719-2.719s1.22-2.718,2.719-2.718-->
                <!--    s2.719,1.219,2.719,2.718S45.955,45,44.456,45z"/>-->
                <!--</svg>-->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 7H16V6C16 4.93913 15.5786 3.92172 14.8284 3.17157C14.0783 2.42143 13.0609 2 12 2C10.9391 2 9.92172 2.42143 9.17157 3.17157C8.42143 3.92172 8 4.93913 8 6V7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V8C20 7.73478 19.8946 7.48043 19.7071 7.29289C19.5196 7.10536 19.2652 7 19 7ZM10 6C10 5.46957 10.2107 4.96086 10.5858 4.58579C10.9609 4.21071 11.4696 4 12 4C12.5304 4 13.0391 4.21071 13.4142 4.58579C13.7893 4.96086 14 5.46957 14 6V7H10V6ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V9H8V10C8 10.2652 8.10536 10.5196 8.29289 10.7071C8.48043 10.8946 8.73478 11 9 11C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V9H14V10C14 10.2652 14.1054 10.5196 14.2929 10.7071C14.4804 10.8946 14.7348 11 15 11C15.2652 11 15.5196 10.8946 15.7071 10.7071C15.8946 10.5196 16 10.2652 16 10V9H18V19Z" fill="black"/>
                </svg>

                <span class="number global-cart-count" style="display: none;">0</span>
              </a>
            </li>
          {% endif %}
          {% if settings.search_enabled %}
            <li class="search">
              <div class="dropdown static">
                <a href="javascript:void(0)" data-toggle="dropdown">
                  <!--<svg class="saerch-svg" xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 0 50 50">-->
                  <!--  <path d="M49.932,45.439l-9.987-9.987c-0.075-0.075-0.168-0.113-0.253-0.168-->
                  <!--  c2.773-3.688,4.419-8.269,4.419-13.229C44.111,9.894,34.217,0,22.056,0C9.894,0,0,9.894,0,22.055C0,34.217,9.894,44.11,22.055,44.11c6.15,0,11.718-2.533,15.722-6.607c0.019,0.021,0.026,0.049,0.046,0.07l9.987,9.987c0.294,0.294,0.678,0.44,1.062,0.44s0.768-0.146,1.061-0.439C50.518,46.975,50.518,46.025,49.932,45.439z M22.056,41.11c-10.507,0-19.055-8.548-19.055-19.055C3,11.548,11.549,3,22.056,3s19.055,8.548,19.055,19.055C41.111,32.562,32.563,41.11,22.056,41.11z"/>-->
                  <!--</svg>-->
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.7099 20.2904L17.9999 16.6104C19.44 14.8148 20.1374 12.5357 19.9487 10.2417C19.76 7.94769 18.6996 5.81318 16.9854 4.27704C15.2713 2.7409 13.0337 1.9199 10.7328 1.98286C8.43194 2.04582 6.24263 2.98795 4.61505 4.61553C2.98747 6.24311 2.04534 8.43243 1.98237 10.7333C1.91941 13.0342 2.74041 15.2718 4.27655 16.9859C5.81269 18.7001 7.94721 19.7605 10.2412 19.9492C12.5352 20.1379 14.8143 19.4405 16.6099 18.0004L20.2899 21.6804C20.3829 21.7741 20.4935 21.8485 20.6153 21.8993C20.7372 21.9501 20.8679 21.9762 20.9999 21.9762C21.1319 21.9762 21.2626 21.9501 21.3845 21.8993C21.5063 21.8485 21.6169 21.7741 21.7099 21.6804C21.8901 21.4939 21.9909 21.2447 21.9909 20.9854C21.9909 20.7261 21.8901 20.4769 21.7099 20.2904V20.2904ZM10.9999 18.0004C9.61544 18.0004 8.26206 17.5899 7.11091 16.8207C5.95977 16.0515 5.06256 14.9583 4.53275 13.6792C4.00293 12.4001 3.86431 10.9926 4.13441 9.63476C4.4045 8.27689 5.07119 7.02961 6.05016 6.05065C7.02912 5.07168 8.27641 4.40499 9.63427 4.1349C10.9921 3.8648 12.3996 4.00342 13.6787 4.53324C14.9578 5.06305 16.051 5.96026 16.8202 7.1114C17.5894 8.26255 17.9999 9.61592 17.9999 11.0004C17.9999 12.8569 17.2624 14.6374 15.9497 15.9501C14.6369 17.2629 12.8564 18.0004 10.9999 18.0004V18.0004Z" fill="black"/>
                    </svg>

                </a>
                <div class="dropdown-menu" role="menu">
                  <div class="search-area">
                    <form action="/search" class="form-inline">
                      <div class="form-area">
                        <input class="form-control" type="search" placeholder="請輸入產品名" aria-label="Search" name="q" value="">
                        <button class="btn-search" type="submit">搜尋</button>
                      </div>
                    </form>
                    <a href="javascript:void(0)" class="close-dropdown"><i class="fa fas fa-times"></i></a>
                  </div>
                </div>
              </div>
            </li>
          {% endif %}
        </ul>
      </nav>
      <!-- mobile-nav end -->
    </div>
  </header>
  <!-- Sidebar -->
  <nav class="drawer-nav" role="navigation">
    <div class="drawer-menu">
      {% include 'side_menu', linklist_name: settings.slider_primary_linklist, session: 'index_sidebar', set_open: settings.slider_primary_linklist_set_open %}
    </div>
  </nav>
</span>

{{ 'css/beta_theme/navbar.css' | asset_url | stylesheet_tag }}
{{ 'css/navbar.css' | asset_url | stylesheet_tag }}

<script>
  $(document).ready(function(){
    // below build for theme
    var headerHeight
    $(window).on('scroll', function (){
      if ($(this).scrollTop() > 0 && $(window).width() > 991){
        $("#header .logo").stop().addClass("scrolled");
      }else{
        $("#header .logo").stop().removeClass("scrolled");
        headerHeight = $("#header").outerHeight()
      }
    })
    $("body").css({
      "padding-top":headerHeight+"px",
    })
  })
</script>