{% 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 %}