{% sw_extends '@Storefront/storefront/layout/navigation/flyout.html.twig' %}
{% block layout_navigation_flyout %}
{% set navTreeChildrens= navigationTree.children %}
{% set name = category.translated.name %}
{% block layout_navigation_flyout_bar %}
{% endblock %}
{% block layout_navigation_flyout_content %}
<div class="row navigation-flyout-content">
{% block layout_navigation_flyout_categories %}
<div class="{% if category.media %}col-3{% else %}col-3{% endif %} p-0">
<div class="navigation-flyout-categories">
{% block layout_navigation_flyout_categories_recoursion %}
{% for treeItem in navTreeChildrens %}
{% set isOpen = loop.index0 is same as(0) %}
{% set category = treeItem.category %}
{% set name = category.translated.name %}
{# @deprecated tag:v6.5.0 - Use "category.id" directly instead. #}
{% set categorId = category.id %}
{% block layout_main_navigation_menu_item %}
{% if category.type == 'folder' %}
<div class="nav-link main-navigation-link"
data-flyout-category-trigger="{{ category.id }}"
title="{{ name }}">
<div class="main-navigation-link-text">
<span itemprop="name">{{ name }}</span>
</div>
</div>
{% else %}
<a class="nav-link main-navigation-link {% if isOpen %} is-open{% endif %}"
href="{{ category_url(category) }}"
itemprop="url"
data-flyout-category-trigger="{{ category.id }}"
{% if category_linknewtab(category) %}target="_blank"{% endif %}
title="{{ name }}">
<div class="main-navigation-link-text">
<span itemprop="name">{{ name }}</span>
</div>
</a>
{% endif %}
{% endblock %}
{% endfor %}
{% endblock %}
</div>
</div>
{% endblock %}
{% for treeItem in navTreeChildrens %}
{% set isOpen = loop.index0 is same as(0) %}
{% set customFields = treeItem.category.customFields %}
{% set banner = customFields.custom_category_menu_banner_img %}
{% if banner %}
{% set iconMediaId = customFields.custom_category_menu_banner_img %}
{% set media = searchMedia([iconMediaId], context.context) %}
{% set icon = media.get(iconMediaId) %}
{% endif %}
<div class="navigation-flyout-category-wrapper col-9 row m-0 p-0 {% if isOpen %}is-open{% endif %}"
data-flyout-category-id="{{ treeItem.category.id }}"
>
<div class="row m-0">
<div class="category-card-section {% if banner %} col-8 {% else %} col-12 {% endif %} {% if treeItem.children == false %}d-none {% endif%} ">
<span class="main-category-name">{{ treeItem.category.translated.name }}</span>
<div class="row m-0">
{% for subcategory in treeItem.children %}
{% if subcategory.category.mediaId %}
{% set imgMediaId = subcategory.category.mediaId %}
{% set media = searchMedia([imgMediaId], context.context) %}
{% set img = media.get(imgMediaId) %}
{% endif %}
<div class="col-4 category-card">
<a href="{{ category_url(subcategory.category) }}" class="category-card-wrapper">
{% sw_thumbnails 'product-image-thumbnails' with {
media: img,
sizes: {
'xs': '218px',
'sm': '218px',
'md': '218px',
'lg': '218px',
'xl': '218px',
},
attributes: {
'class': 'category-card-image',
'alt': ( subcategory.category.translated.name ?: ''),
}
} %}
<span class="category-card-name">{{ subcategory.category.translated.name }}</span>
</a>
</div>
{% endfor %}
</div>
</div>
{% block layout_navigation_flyout_teaser %}
{% if banner %}
<div class="category-banner {% if treeItem.children == false %}col-12 {% else %} col-4{% endif %}">
<div class="navigation-flyout-teaser">
<span class="category-banner-headline">{{ customFields.custom_category_menu_banner_headline }}</span>
{% block layout_navigation_flyout_teaser_image %}
<a class="navigation-flyout-teaser-image-container {% if treeItem.children == false %}mw-100 {% endif %} "
href="{{ customFields.custom_category_menu_banner_url }}">
<img src="{{ icon.url }}" class="navigation-flyout-teaser-image"
data-object-fit="cover">
</a>
{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}
</div>
</div>
{% endfor %}
{% endblock %}
</div>
{% endblock %}