{% sw_extends '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
{% block layout_main_navigation %}
{% if config('H1webMegaMenu.config.disable') %}
{{ parent() }}
{% else %}
{% block megamenu %}
<nav class="megamenu d-none d-lg-block"
data-mega-menu="true"
data-trigger-by="{{ config('H1webMegaMenu.config.triggerNavigation') }}"
itemscope="itemscope"
itemtype="http://schema.org/SiteNavigationElement">
<div class="container">
<div class="d-flex justify-content-between">
{% block megamenu_list %}
{% set showCategoryParent = null %}
{% for treeItem in page.header.navigation.tree %}
{% if treeItem.category.customFields.h1_mega_menu_category_parent %}
{% set showCategoryParent = 'true' %}
{% endif %}
{% endfor %}
{% block megamenu_list_ul %}
<ul class="megamenu-list">
{% block megamenu_homepage_link %}
{% if config('H1webMegaMenu.config.showHomeLink') == 'true' %}
<li class="megamenu-item">
<a class="{% if controllerAction is same as('home') %} active{% endif %} home-link ml-1"
href="{{ path('frontend.home.page') }}"
itemprop="url"
title="{{ "general.homeLink"|trans|striptags }}"
alt="{{ "general.homeLink"|trans|striptags }}">
<div class="main-navigation-link-text">
{% sw_icon 'home' %}
</div>
</a>
</li>
{% endif %}
{% endblock %}
{% block megamenu_list_placeholder %}
{% if showCategoryParent == 'true' %}
{% block megamenu_homepage_placeholder %}
<li class="megamenu-item{% if categorId is same as(page.header.navigation.active.id) %} active{% endif %}"
data-megamenu-trigger="products_foldout">
<button class="megamenu-link">
<span itemprop="name">{{ "h1.mega_menu.parent_item"|trans|sw_sanitize }}</span>
{% sw_icon 'arrow-medium-down' style {'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'} %}
</button>
</li>
{% endblock %}
{% block megamenu_list_placeholder_foldout %}
<li class="megamenu-foldout" data-megamenu-id="products_foldout">
<div class="container position-relative">
<button type="button" class="js-close-megamenu megamenu-close">close</button>
{% sw_include '@Storefront/storefront/layout/navigation/megamenu/categories.html.twig' with {
navigationTree: page.header.navigation.tree,
filter: true
} only %}
</div>
</li>
{% endblock %}
{% endif %}
{% endblock %}
{% block megamenu_list_items %}
{% for treeItem in page.header.navigation.tree %}
{% if not treeItem.category.customFields.h1_mega_menu_category_parent %}
{% set category = treeItem.category %}
{% set name = category.translated.name %}
{# @deprecated tag:v6.5.0 - Use "category.id" directly instead. #}
{% set categorId = category.id %}
{% set triggerNavigation = config('H1webMegaMenu.config.triggerNavigation') %}
{% block megamenu_list_item %}
{% if treeItem.children|length > 0 %}
<li class="megamenu-item{% if categorId is same as(page.header.navigation.active.id) %} active{% endif %}"
data-megamenu-trigger="{{ categorId }}">
{% if triggerNavigation == 'mouseenter' %}
<a class="megamenu-link"
href="{{ category_url(category) }}"
itemprop="url"
{% if category_linknewtab(category) %}target="_blank"{% endif %}
title="{{ name }}"
>
<span itemprop="name">{{ name }}</span>
{% sw_icon 'arrow-medium-down' style {'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'} %}
</a>
{% else %}
<button class="megamenu-link">
<span itemprop="name">{{ name }}</span>
{% sw_icon 'arrow-medium-down' style {'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'} %}
</button>
{% endif %}
</li>
{% else %}
<li class="megamenu-item{% if categorId is same as(page.header.navigation.active.id) %} active{% endif %}"
data-megamenu-no-trigger="true">
<a class="megamenu-link"
href="{{ category_url(category) }}"
itemprop="url"
{% if category_linknewtab(category) %}target="_blank"{% endif %}
title="{{ name }}"
>
<span itemprop="name">{{ name }}</span>
</a>
</li>
{% endif %}
{% endblock %}
{% set navigationChildrenCount = 0 %}
{% for treeItem in page.header.navigation.tree %}
{% if treeItem.category.childCount > 0 %}
{% set navigationChildrenCount = navigationChildrenCount + 1 %}
{% endif %}
{% endfor %}
{% if navigationChildrenCount > 0 %}
{% sw_include '@Storefront/storefront/layout/navigation/megamenu/megamenu.html.twig' with {
navigationTree: treeItem
} only %}
{% endif %}
{% endif %}
{% endfor %}
{% endblock %}
</ul>
{% endblock %}
{% endblock %}
{% block layout_header_top_bar_service %}
{% sw_include '@Storefront/storefront/layout/header/actions/service-menu-widget.html.twig' %}
{% endblock %}
</div>
</div>
</nav>
{% block megamenu_layover %}
<div class="js-close-megamenu-all megamenu-layover"></div>
{% endblock %}
{% endblock %}
{% endif %}
{% endblock %}