src/Storefront/Resources/views/storefront/layout/navigation/flyout.html.twig line 1

  1. {% block layout_navigation_flyout %}
  2.     {% set category = navigationTree.category %}
  3.     {% set name = category.translated.name %}
  4.     {% block layout_navigation_flyout_bar %}
  5.         <div class="row navigation-flyout-bar">
  6.             {% block layout_navigation_flyout_bar_category %}
  7.                 <div class="col">
  8.                     <div class="navigation-flyout-category-link">
  9.                         {% block layout_navigation_flyout_bar_category_link %}
  10.                             {% if category.type == 'page' %}
  11.                                 <a class="nav-link"
  12.                                    href="{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}"
  13.                                    itemprop="url"
  14.                                    title="{{ name }}">
  15.                                     {% block layout_navigation_flyout_bar_category_link_text %}
  16.                                         {{ "general.toCategory"|trans|sw_sanitize }} {{ name }}
  17.                                         {% sw_icon 'arrow-right' style {
  18.                                             'color': 'primary',
  19.                                             'pack':'solid'
  20.                                         } %}
  21.                                     {% endblock %}
  22.                                 </a>
  23.                             {% endif %}
  24.                         {% endblock %}
  25.                     </div>
  26.                 </div>
  27.             {% endblock %}
  29.             {% block layout_navigation_flyout_bar_close %}
  30.                 <div class="col-auto">
  31.                     <div class="navigation-flyout-close js-close-flyout-menu">
  32.                         {% block layout_navigation_flyout_bar_close_content %}
  33.                             {% block layout_utilities_offcanvas_close_icon %}
  34.                                 {% sw_icon 'x' %}
  35.                             {% endblock %}
  36.                         {% endblock %}
  37.                     </div>
  38.                 </div>
  39.             {% endblock %}
  40.         </div>
  41.     {% endblock %}
  43.     {% block layout_navigation_flyout_content %}
  44.         <div class="row navigation-flyout-content">
  45.             {% block layout_navigation_flyout_categories %}
  46.                 <div class="{% if category.media %}col-8 col-xl-9{% else %}col{% endif %}">
  47.                     <div class="navigation-flyout-categories">
  48.                         {% block layout_navigation_flyout_categories_recoursion %}
  49.                             {% sw_include '@Storefront/storefront/layout/navigation/categories.html.twig' with {
  50.                                 navigationTree: navigationTree.children,
  51.                                 navigationMedia: category.media,
  52.                                 page: page
  53.                             } only %}
  54.                         {% endblock %}
  55.                     </div>
  56.                 </div>
  57.             {% endblock %}
  59.             {% block layout_navigation_flyout_teaser %}
  60.                 {% if category.media %}
  61.                 <div class="col-4 col-xl-3">
  62.                     <div class="navigation-flyout-teaser">
  63.                         {% block layout_navigation_flyout_teaser_image %}
  64.                             <a class="navigation-flyout-teaser-image-container"
  65.                                href="{{ category_url(category) }}"
  66.                                {% if category_linknewtab(category) %}target="_blank"
  67.                                    {% if category.linkType == "external" %}rel="noopener noreferrer"{% endif %}
  68.                                {% endif %}
  69.                                title="{{ name }}">
  70.                                 {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
  71.                                     media: category.media,
  72.                                     sizes: {
  73.                                         'default': '310px'
  74.                                     },
  75.                                     attributes: {
  76.                                         'class': 'navigation-flyout-teaser-image',
  77.                                         'alt': (category.media.translated.alt ?: ''),
  78.                                         'title': (category.media.translated.title ?: ''),
  79.                                         'data-object-fit': 'cover'
  80.                                     }
  81.                                 } %}
  82.                             </a>
  83.                         {% endblock %}
  84.                     </div>
  85.                 </div>
  86.                 {% endif %}
  87.             {% endblock %}
  88.         </div>
  89.     {% endblock %}
  90. {% endblock %}