312 lines
16 KiB
Plaintext
312 lines
16 KiB
Plaintext
{% comment %}
|
|
Renders a header drawer menu for mobile and desktop.
|
|
|
|
Usage:
|
|
{% render 'header-drawer' %}
|
|
{% endcomment %}
|
|
|
|
<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
|
|
<details id="Details-menu-drawer-container" class="menu-drawer-container">
|
|
<summary
|
|
class="header__icon header__icon--menu header__icon--summary link focus-inset"
|
|
aria-label="{{ 'sections.header.menu' | t }}"
|
|
>
|
|
<span>
|
|
{% render 'icon-hamburger' %}
|
|
{% render 'icon-close' %}
|
|
</span>
|
|
</summary>
|
|
<div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">
|
|
<div class="menu-drawer__inner-container">
|
|
<div class="menu-drawer__navigation-container">
|
|
<nav class="menu-drawer__navigation">
|
|
<ul class="menu-drawer__menu has-submenu list-menu" role="list">
|
|
{%- for link in section.settings.menu.links -%}
|
|
<li>
|
|
{%- if link.links != blank -%}
|
|
<details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
|
|
<summary
|
|
id="HeaderDrawer-{{ link.handle }}"
|
|
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
|
|
>
|
|
{{ link.title | escape }}
|
|
{% render 'icon-arrow' %}
|
|
{% render 'icon-caret' %}
|
|
</summary>
|
|
<div
|
|
id="link-{{ link.handle | escape }}"
|
|
class="menu-drawer__submenu has-submenu gradient motion-reduce"
|
|
tabindex="-1"
|
|
>
|
|
<div class="menu-drawer__inner-submenu">
|
|
<button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
|
|
{% render 'icon-arrow' %}
|
|
{{ link.title | escape }}
|
|
</button>
|
|
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
|
|
{%- for childlink in link.links -%}
|
|
<li>
|
|
{%- if childlink.links == blank -%}
|
|
<a
|
|
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
|
|
href="{{ childlink.url }}"
|
|
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
|
|
{% if childlink.current %}
|
|
aria-current="page"
|
|
{% endif %}
|
|
>
|
|
{{ childlink.title | escape }}
|
|
</a>
|
|
{%- else -%}
|
|
<details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
|
|
<summary
|
|
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
|
|
class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
|
|
>
|
|
{{ childlink.title | escape }}
|
|
{% render 'icon-arrow' %}
|
|
{% render 'icon-caret' %}
|
|
</summary>
|
|
<div
|
|
id="childlink-{{ childlink.handle | escape }}"
|
|
class="menu-drawer__submenu has-submenu gradient motion-reduce"
|
|
>
|
|
<button
|
|
class="menu-drawer__close-button link link--text focus-inset"
|
|
aria-expanded="true"
|
|
>
|
|
{% render 'icon-arrow' %}
|
|
{{ childlink.title | escape }}
|
|
</button>
|
|
<ul
|
|
class="menu-drawer__menu list-menu"
|
|
role="list"
|
|
tabindex="-1"
|
|
>
|
|
{%- for grandchildlink in childlink.links -%}
|
|
<li>
|
|
<a
|
|
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
|
|
href="{{ grandchildlink.url }}"
|
|
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
|
|
{% if grandchildlink.current %}
|
|
aria-current="page"
|
|
{% endif %}
|
|
>
|
|
{{ grandchildlink.title | escape }}
|
|
</a>
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
{%- endif -%}
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
{%- else -%}
|
|
<a
|
|
id="HeaderDrawer-{{ link.handle }}"
|
|
href="{{ link.url }}"
|
|
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
|
|
{% if link.current %}
|
|
aria-current="page"
|
|
{% endif %}
|
|
>
|
|
{{ link.title | escape }}
|
|
</a>
|
|
{%- endif -%}
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</nav>
|
|
<div class="menu-drawer__utility-links">
|
|
{%- if shop.customer_accounts_enabled -%}
|
|
<a
|
|
href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
|
|
class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"
|
|
>
|
|
{% render 'icon-account' %}
|
|
{%- liquid
|
|
if customer
|
|
echo 'customer.account_fallback' | t
|
|
else
|
|
echo 'customer.log_in' | t
|
|
endif
|
|
-%}
|
|
</a>
|
|
{%- endif -%}
|
|
{%- if localization.available_countries or localization.available_languages -%}
|
|
<div class="menu-drawer__localization header-localization">
|
|
{%- if localization.available_countries and localization.available_countries.size > 1 -%}
|
|
<noscript>
|
|
{%- form 'localization', id: 'HeaderCountryMobileFormNoScriptDrawer', class: 'localization-form' -%}
|
|
<div class="localization-form__select">
|
|
<h2 class="visually-hidden" id="HeaderCountryMobileLabelNoScriptDrawer">
|
|
{{ 'localization.country_label' | t }}
|
|
</h2>
|
|
<select
|
|
class="localization-selector link"
|
|
name="country_code"
|
|
aria-labelledby="HeaderCountryMobileLabelNoScriptDrawer"
|
|
>
|
|
{%- for country in localization.available_countries -%}
|
|
<option
|
|
value="{{ country.iso_code }}"
|
|
{%- if country.iso_code == localization.country.iso_code %}
|
|
selected
|
|
{% endif %}
|
|
>
|
|
{{ country.name }} ({{ country.currency.iso_code }}
|
|
{{ country.currency.symbol }})
|
|
</option>
|
|
{%- endfor -%}
|
|
</select>
|
|
{% render 'icon-caret' %}
|
|
</div>
|
|
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
|
|
{%- endform -%}
|
|
</noscript>
|
|
|
|
<localization-form class="no-js-hidden">
|
|
{%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}
|
|
<div>
|
|
<h2 class="visually-hidden" id="HeaderCountryMobileLabel">
|
|
{{ 'localization.country_label' | t }}
|
|
</h2>
|
|
{%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
|
|
</div>
|
|
{%- endform -%}
|
|
</localization-form>
|
|
{% endif %}
|
|
|
|
{%- if localization.available_languages and localization.available_languages.size > 1 -%}
|
|
<noscript>
|
|
{%- form 'localization',
|
|
id: 'HeaderLanguageMobileFormNoScriptDrawer',
|
|
class: 'localization-form'
|
|
-%}
|
|
<div class="localization-form__select">
|
|
<h2 class="visually-hidden" id="HeaderLanguageMobileLabelNoScriptDrawer">
|
|
{{ 'localization.language_label' | t }}
|
|
</h2>
|
|
<select
|
|
class="localization-selector link"
|
|
name="locale_code"
|
|
aria-labelledby="HeaderLanguageMobileLabelNoScriptDrawer"
|
|
>
|
|
{%- for language in localization.available_languages -%}
|
|
<option
|
|
value="{{ language.iso_code }}"
|
|
lang="{{ language.iso_code }}"
|
|
{%- if language.iso_code == localization.language.iso_code %}
|
|
selected
|
|
{% endif %}
|
|
>
|
|
{{ language.endonym_name | capitalize }}
|
|
</option>
|
|
{%- endfor -%}
|
|
</select>
|
|
{% render 'icon-caret' %}
|
|
</div>
|
|
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
|
|
{%- endform -%}
|
|
</noscript>
|
|
|
|
<localization-form class="no-js-hidden">
|
|
{%- form 'localization', id: 'HeaderLanguageMobileForm', class: 'localization-form' -%}
|
|
<div>
|
|
<h2 class="visually-hidden" id="HeaderLanguageMobileLabel">
|
|
{{ 'localization.language_label' | t }}
|
|
</h2>
|
|
{%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
|
|
</div>
|
|
{%- endform -%}
|
|
</localization-form>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
<ul class="list list-social list-unstyled" role="list">
|
|
{%- if settings.social_twitter_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_twitter_link }}" class="list-social__link link">
|
|
{%- render 'icon-twitter' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_facebook_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_facebook_link }}" class="list-social__link link">
|
|
{%- render 'icon-facebook' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_pinterest_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_pinterest_link }}" class="list-social__link link">
|
|
{%- render 'icon-pinterest' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_instagram_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_instagram_link }}" class="list-social__link link">
|
|
{%- render 'icon-instagram' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_tiktok_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_tiktok_link }}" class="list-social__link link">
|
|
{%- render 'icon-tiktok' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_tumblr_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
|
|
{%- render 'icon-tumblr' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_snapchat_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_snapchat_link }}" class="list-social__link link">
|
|
{%- render 'icon-snapchat' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_youtube_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_youtube_link }}" class="list-social__link link">
|
|
{%- render 'icon-youtube' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
{%- if settings.social_vimeo_link != blank -%}
|
|
<li class="list-social__item">
|
|
<a href="{{ settings.social_vimeo_link }}" class="list-social__link link">
|
|
{%- render 'icon-vimeo' -%}
|
|
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
|
|
</a>
|
|
</li>
|
|
{%- endif -%}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</header-drawer>
|