initial commit
This commit is contained in:
Gerhard Scheikl
@@ -0,0 +1,295 @@
|
||||
{% 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>
|
||||
{{- 'icon-hamburger.svg' | inline_asset_content -}}
|
||||
{{- 'icon-close.svg' | inline_asset_content -}}
|
||||
</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 }}
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 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 }}
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</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"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 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"
|
||||
rel="nofollow"
|
||||
>
|
||||
{%- if section.settings.enable_customer_avatar -%}
|
||||
<account-icon>
|
||||
{%- if customer and customer.has_avatar? -%}
|
||||
{{ customer | avatar }}
|
||||
{%- else -%}
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-account.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</account-icon>
|
||||
{%- else -%}
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-account.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
{%- 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 -%}
|
||||
<localization-form>
|
||||
{%- 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 -%}
|
||||
<localization-form>
|
||||
{%- 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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-twitter.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-facebook.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-pinterest.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-instagram.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-tiktok.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-tumblr.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-snapchat.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-youtube.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<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">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-vimeo.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</header-drawer>
|
||||
Reference in New Issue
Block a user