static-header original

{% assign s = section.settings %}
{% assign links = linklists[s.menu].links %}
{% assign quick_links = linklists[s.search_quick_links].links %}


<script>
  window.theme.quickCartNote = "{{ settings.quick_cart_note }}";

  window.theme.logoFont = {
    fontFamily: {{ settings.font_logo.family | json }},
    fontSize: "{{ settings.font_logo_size }}px",
    fontWeight: "{{ settings.font_logo.weight }}",
    fontStyle: "{{ settings.font_logo.style }}"
  }
</script>

<section
  data-component="header"
  data-section-id="{{ section.id }}"
  data-section-type="header"
  class="bg-base w-100 z-5"
  data-quicklinks='
    [
      {%- for link in quick_links -%}
        {
          "title": "{{ link.title | escape }}",
          "url": "{{ link.url }}"
        }
        {% if forloop.last == false %},{% endif %}
      {%- endfor -%}
    ]
  '
  data-navigation='
    [
      {%- for link in links -%}
        {
          "active": "{{ link.active }}",
          "child_active": "{{ link.child_active }}",
          "current": "{{ link.current }}",
          "child_current": "{{ link.child_current }}",
          "levels": "{{ link.levels }}",
          "links": [
            {%- for child in link.links -%}
              {
                "active": "{{ child.active }}",
                "child_active": "{{ child.child_active }}",
                "current": "{{ child.current }}",
                "child_current": "{{ child.child_current }}",
                "levels": "{{ child.levels }}",

                  "links": [
                    {%- for grandchild in child.links -%}
                      {
                        "active": "{{ grandchild.active }}",
                        "child_active": "{{ grandchild.child_active }}",
                        "current": "{{ grandchild.current }}",
                        "child_current": "{{ grandchild.child_current }}",
                        "levels": "{{ grandchild.levels }}",
                        "object": "{{ grandchild.object }}",
                        "title": "{{ grandchild.title | escape }}",
                        "type": "{{ grandchild.type }}",
                        "url": "{{ grandchild.url }}"
                      }
                      {% if forloop.last == false %},{% endif %}
                    {%- endfor -%}
                  ],
                "object": "{{ child.object }}",
                "title": "{{ child.title | escape }}",
                "type": "{{ child.type }}",
                "url": "{{ child.url }}"
              }
              {% if forloop.last == false %},{% endif %}
            {%- endfor -%}
          ],
          "object": "{{ link.object }}",
          "title": "{{ link.title | escape }}",
          "type": "{{ link.type }}",
          "url": "{{ link.url }}"
        }

        {% if forloop.last == false %},{% endif %}
      {%- endfor -%}
    ]
  '
>
  {%- if s.announcement_bar_enabled -%}
    <div class="announcement-bar">
      {%- if s.announcement_bar_link != blank -%}
        <a class="color-inherit" href="{{ s.announcement_bar_link }}">
          {{ s.announcement_bar_text | escape }}
        </a>
      {%- else -%}
        {{ s.announcement_bar_text | escape }}
      {%- endif -%}
    </div>
  {%- endif -%}

  <header
    class="header bb b--default"
    data-transparent-header="{{ s.transparent_header_enabled }}"
  >
  <div class="header__content">
    {% comment %} React {% endcomment %}
    <div
      id="mobile-nav"
        {% unless s.transparent_header_enabled and template.name == 'index' %}
          {% if settings.color_header_icon %}
            style="color: {{ settings.color_header_icon }};"
          {% endif %}
        {% endunless %}
    ></div>
    <h1>
      <a href="/" class="header__logo-image color-inherit">

        {% if template.name == 'index' and s.transparent_header_enabled and s.transparent_header_logo != blank %}
          {% capture image_size %}{{ s.logo_max_width }}x{% endcapture %}
          <img src="{{ s.transparent_header_logo | img_url: image_size }}"
              srcset="{{ s.transparent_header_logo | img_url: image_size }} 1x, {{ s.transparent_header_logo | img_url: image_size, scale: 2 }} 2x"
              alt="{{ s.transparent_header_logo.alt | default: shop.name }}">

        {% else %}

          {% if s.logo != blank %}
            {% capture image_size %}{{ s.logo_max_width }}x{% endcapture %}
            <img src="{{ s.logo | img_url: image_size }}"
                srcset="{{ s.logo | img_url: image_size }} 1x, {{ s.logo | img_url: image_size, scale: 2 }} 2x"
                alt="{{ s.logo.alt | default: shop.name }}">

          {% else %}

            <span class="header__logo-text">{{ shop.name }}</span>

          {% endif %}

        {% endif %}
      </a>
    </h1>

    <div class="flex justify-between" data-primary-navigation="yes">
      <nav class="header__nav">
        {%
          include 'navmenu' with
          menu: s.menu,
          depth: 1,
          max_depth: 3,
          blocks: section.blocks,
          top_level: true,
          has_triggers: true
        %}
      </nav>
      <div class="no-js-menu no-js-menu--desktop">
        {% include 'no-js-navmenu' with menu: s.menu %}
      </div>

      <div class="header__icon-wrapper">
        <ul class="header__icon-list">
          <li class="header__icon header__icon--search">
            <noscript>
            <a href="/search" class="color-inherit">
              <div class="relative" style="width: 24px;">
                {% include 'icon-search' %}
              </div>
            </a>
            </noscript>
            <div id="search"></div>
          </li>
          {% if shop.customer_accounts_enabled %}
            <li class="header__icon header__icon--account">
              <a href="/account" class="color-inherit">
                <div class="relative" style="width: 24px;">
                  {% include 'icon-account' %}
                </div>
              </a>
            </li>
          {% endif %}
          <li class="header__icon header__icon--cart">
              <a href="/cart" class="color-inherit js-cart-drawer-toggle">
                <div class="quick-cart__icon" style="width: 24px;">
                  {% include 'icon-cart' %}
                  <div class="quick-cart__indicator js-cart-count">
                    {{ cart.item_count }}
                  </div>
                  {% include 'component-quick-cart' %}
                </div>
              </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="no-js-menu no-js-menu--mobile">
    {% include 'no-js-navmenu' with menu: s.menu %}
  </div>
  </header>

</section>

{% assign proper_alpha = s.transparent_header_border_opacity | divided_by: 100.00 %}

<style>
  .header {
    {% if s.transparent_header_enabled and template.name == 'index' %}
      {% if s.transparent_header_foreground_color != blank %}
        color: {{ s.transparent_header_foreground_color }};
      {% endif %}
      {% if s.transparent_header_border_color != blank %}
        border-color: {{ s.transparent_header_border_color | color_modify: 'alpha', proper_alpha }}
      {% else %}
        border-color: {{ settings.color_header_border | color_modify: 'alpha', proper_alpha }}
      {% endif %}
    {% else %}
      color: {{ settings.color_header_text }};
      background-color: {{ settings.color_header_bg }};
      border-color: {{ settings.color_header_border }};
    {% endif %}
  }

  .header__logo-text {
    font-size: {{ settings.font_logo_size }}px;
  }

  .header__icon-wrapper {
    {% if s.transparent_header_enabled and template.name == 'index' %}
      {% if s.transparent_header_foreground_color %}
        color: {{ s.transparent_header_foreground_color }};
      {% endif %}
    {% else %}
      {% if settings.color_header_icon %}
        color: {{ settings.color_header_icon }};
      {% endif %}
    {% endif %}
  }
</style>

{% if s.logo != blank %}
  <style>
    .header__logo-image {
      display: block;
      max-width: {{ s.logo_max_width }}px;
    }
  </style>
{% endif %}

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "announcement_bar_enabled",
        "label": "Show announcement",
        "default": true
      },
      {
        "type": "text",
        "id": "announcement_bar_text",
        "label": "Announcement text",
        "default": "Announce something here"
      },
      {
        "type": "url",
        "id": "announcement_bar_link",
        "label": "Announcement link",
        "info": "Optional"
      },
      {
        "type": "header",
        "content": "Header"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo image"
      },
      {
        "type": "range",
        "id": "logo_max_width",
        "min": 50,
        "max": 350,
        "step": 10,
        "unit": "px",
        "label": "Custom logo width",
        "default": 250
      },
      {
        "type": "link_list",
        "id": "menu",
        "label": "Main menu",
        "default": "main-menu"
      },
      {
        "type": "header",
        "content": "Transparent header"
      },
      {
        "type": "checkbox",
        "id": "transparent_header_enabled",
        "label": "Transparent header",
        "info": "The transparent header works when the first section is a Slideshow or Video section.",
        "default": false
      },
      {
        "type": "color",
        "id": "transparent_header_foreground_color",
        "label": "Text color",
        "info": "Only applicable if transparent header is enabled.",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "transparent_header_border_color",
        "label": "Border color",
        "info": "Only applicable if transparent header is enabled.",
        "default": "#ffffff"
      },
      {
        "type": "range",
        "id": "transparent_header_border_opacity",
        "min": 0,
        "max": 100,
        "step": 10,
        "unit": "%",
        "label": "Border opacity",
        "default": 50
      },
      {
        "type": "image_picker",
        "id": "transparent_header_logo",
        "label": "Transparent logo image"
      },
      {
        "type": "header",
        "content": "Search"
      },
      {
        "type": "link_list",
        "id": "search_quick_links",
        "label": "Search bar quick links",
        "info": "Choose a link list from your navigation settings to display in the search suggestions dropdown."
      }
    ],
    "blocks": [
      {
        "type": "mega_nav",
        "name": "Mega nav",
        "settings": [
          {
            "type": "text",
            "id": "dropdown_parent_link",
            "label": "Dropdown parent link",
            "info": "Name the link in the main menu that you'd like the Mega nav to appear from."
          },
          {
            "type": "image_picker",
            "id": "mega_nav_featured_image",
            "label": "Mega nav featured image"
          },
          {
            "type": "text",
            "id": "featured_image_heading",
            "label": "Featured image heading"
          },
          {
            "type": "text",
            "id": "featured_image_link_text",
            "label": "Featured image link text"
          },
          {
            "type": "url",
            "id": "featured_image_link",
            "label": "Featured image link"
          }
        ]
      }
    ]
  }
{% endschema %}


{% if template.name == 'index' %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "{{ shop.name }}",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "{{ shop.url }}/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      },
      "url": "{{ shop.url }}{{ page.url }}"
    }
  </script>
{% endif %}