{% block layout_navigation_flyout %}
{% set category = navigationTree.category %}
{% set name = category.translated.name %}
{% block layout_navigation_flyout_bar %}
<div class="row navigation-flyout-bar">
{% block layout_navigation_flyout_bar_category %}
<div class="col">
<div class="navigation-flyout-category-link">
{% block layout_navigation_flyout_bar_category_link %}
{% if category.type == 'page' %}
<a class="nav-link"
href="{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}"
itemprop="url"
title="{{ name }}">
{% block layout_navigation_flyout_bar_category_link_text %}
{{ "general.toCategory"|trans|sw_sanitize }} {{ name }}
{% sw_icon 'arrow-right' style {
'color': 'primary',
'pack':'solid'
} %}
{% endblock %}
</a>
{% endif %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block layout_navigation_flyout_bar_close %}
<div class="col-auto">
<div class="navigation-flyout-close js-close-flyout-menu">
{% block layout_navigation_flyout_bar_close_content %}
{% block layout_utilities_offcanvas_close_icon %}
{% sw_icon 'x' %}
{% endblock %}
{% endblock %}
</div>
</div>
{% endblock %}
</div>
{% endblock %}
{% block layout_navigation_flyout_content %}
<div class="row navigation-flyout-content">
{% block layout_navigation_flyout_categories %}
<div class="{% if category.media %}col-8 col-xl-9{% else %}col{% endif %}">
<div class="navigation-flyout-categories">
{% block layout_navigation_flyout_categories_recoursion %}
{% sw_include '@Storefront/storefront/layout/navigation/categories.html.twig' with {
navigationTree: navigationTree.children,
navigationMedia: category.media,
page: page
} only %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block layout_navigation_flyout_teaser %}
{% if category.media %}
<div class="col-4 col-xl-3">
<div class="navigation-flyout-teaser">
{% block layout_navigation_flyout_teaser_image %}
<a class="navigation-flyout-teaser-image-container"
href="{{ category_url(category) }}"
{% if category_linknewtab(category) %}target="_blank"
{% if category.linkType == "external" %}rel="noopener noreferrer"{% endif %}
{% endif %}
title="{{ name }}">
{% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
media: category.media,
sizes: {
'default': '310px'
},
attributes: {
'class': 'navigation-flyout-teaser-image',
'alt': (category.media.translated.alt ?: ''),
'title': (category.media.translated.title ?: ''),
'data-object-fit': 'cover'
}
} %}
</a>
{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}