vendor/crehler/advanced-menu/src/Resources/views/storefront/layout/navigation/navigation.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
  3. {% block layout_main_navigation_menu_home %}
  4.     {% if page.header.extensions.productsCategory %}
  5.         <a class="nav-link main-navigation-link"
  6.            href="{{ page.header.extensions.productsCategory.url }}"
  7.            itemprop="url"
  8.            data-flyout-menu-trigger="{{ page.header.extensions.productsCategory.id }}"
  9.            title="{{ page.header.extensions.productsCategory.name|striptags }}">
  10.             <div class="main-navigation-link-text">
  11.                 <span itemprop="name">{{ page.header.extensions.productsCategory.name|sw_sanitize }}</span>
  12.             </div>
  13.         </a>
  14.     {% endif %}
  15. {% endblock %}
  17. {% block layout_main_navigation_menu_flyouts %}
  18.     {% if page.header.extensions.productsCategory %}
  19.         <div class="navigation-flyout cam-flyout"
  20.              data-flyout-menu-id="{{ page.header.extensions.productsCategory.id }}">
  21.             <div class="container">
  22.                 <div class="row navigation-flyout-bar">
  23.                     {% set productsCategorySettings = { 'url': path('frontend.mojebambino.productTree') } %}
  24.                     <div class="col" data-products-category
  25.                          data-products-category-options='{{ productsCategorySettings|json_encode }}'>
  26.                         <div class="cam"
  27.                              :class="{'cam--search': searchActive, 'cam--menu': !searchActive}"
  28.                              :style="{'height': camHeight, 'max-height': menuMaxHeight}"
  29.                         >
  30.                             <div v-if="!isReady" class="cam__loader">
  31.                                 <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
  32.                             </div>
  33.                             <div class="cam__overflow" :style="overflowTopStyle"></div>
  34.                             <div class="cam__search" v-show="isReady">
  35.                                 <div class="cam_search-inner" :class="{'cam_search-inner--focus': isFocused}">
  36.                                     <input @focusin="onInputFocusIn" @focusout="onInputFocusOut" v-model="search"
  37.                                            @keyup="onSearch" type="search" name="search"
  38.                                            class="form-control cam__search-input" autocomplete="off"
  39.                                            autocapitalize="off" placeholder="Wyszukaj kategorie"
  40.                                            aria-label="Wyszukaj kategorie" maxlength="30">
  41.                                     <div class="cam__search-icon cam__search-icon--x" @click.prevent="onClearSearch">
  42.                                         {% sw_icon 'x' %}
  43.                                     </div>
  44.                                     <div class="cam__search-icon cam__search-icon--search">
  45.                                         {% sw_icon 'search' %}
  46.                                     </div>
  47.                                 </div>
  48.                             </div>
  49.                             <div class="cam__result" v-show="searchActive && isReady">
  50.                                 <div class="cam__result-first" v-for="first in searchResult" v-show="first.show">
  51.                                     <a class="cam__result-first-name" :href="first.url" v-html="first.text"></a>
  52.                                     <div class="cam__result-first-sub">
  53.                                         <div class="cam__result-second" v-for="second in first.childs"
  54.                                              v-show="second.show">
  55.                                             <a class="cam__result-second-name" :href="second.url">
  56.                                                 <span v-html="second.text"></span>
  57.                                                 {% sw_icon 'arrow-head-right' %}
  58.                                             </a>
  59.                                         </div>
  60.                                     </div>
  61.                                 </div>
  62.                             </div>
  63.                             <div class="cam__categories"
  64.                                  v-show="!searchActive && isReady"
  65.                                  @load="calculateStyles"
  66.                                  ref="categories"
  67.                             >
  68.                                 <div class="cam__categories-items"
  69.                                      :class="{'cam__categories-items--show-top': showItemsTopArrow, 'cam__categories-items--show-bottom': showItemsBottomArrow}">
  70.                                     <div class="cam__categories-items-top" v-if="showItemsTopArrow"
  71.                                          @click="onScrollList('top')">
  72.                                         {% sw_icon 'arrow-head-up' %}
  73.                                     </div>
  74.                                     <div class="cam__categories-items-elements" ref="menuElements"
  75.                                          :style="{'max-height': menuElementsMaxHeightPx}"
  76.                                     >
  77.                                         <a v-for="item in tree"
  78.                                            class="cam__categories-item"
  79.                                            :class="{'cam__categories-item--active': (currentId === item.id)}"
  80.                                            @mouseover="onOpenMenu(item.id)"
  81.                                            @mouseleave="onCloseMenu(item.id)"
  82.                                            :href="item.url"
  83.                                         >
  84.                                             <div class="cam__categories-item-image">
  85.                                                 <img v-if="item.icon && item.isSvgIcon"
  86.                                                      class="cam__categories-item-media"
  87.                                                      :src="item.icon"
  88.                                                      data-svg-inject
  89.                                                 />
  90.                                                 <img v-if="item.icon && !item.isSvgIcon"
  91.                                                      class="cam__categories-item-media" :src="item.icon"/>
  92.                                             </div>
  93.                                             <div class="cam__categories-item-text">
  94.                                                 <span class="cam__categories-item-text-inner">${ item.name }</span>
  95.                                             </div>
  96.                                             <div class="cam__categories-item-arrow">
  97.                                                 <span v-if="item.hasChild" class="cam__categories-item-arrow-triangle"></span>
  98.                                                 {% sw_icon 'arrow-head-right' %}
  99.                                             </div>
  100.                                         </a>
  101.                                     </div>
  102.                                     <div class="cam__categories-items-bottom" v-if="showItemsBottomArrow"
  103.                                          @click="onScrollList('bottom')">
  104.                                         {% sw_icon 'arrow-head-down' %}
  105.                                     </div>
  106.                                 </div>
  107.                                 <div class="cam__categories-content" :style="{'max-height': menuContentMaxHeightPx}">
  108.                                     <div
  109.                                             v-for="item in tree"
  110.                                             class="cam__categories-sub"
  111.                                             :class="{'cam__categories-sub--has-background': item.background, 'cam__categories-sub--show': (currentId === item.id && item.hasChild)}"
  112.                                             :style="getCategoryStyle(item)"
  113.                                             @mouseover="onOpenMenu(item.id)"
  114.                                             @mouseleave="onCloseMenu(item.id)"
  115.                                             :ref="item.id"
  116.                                     >
  117.                                         <div v-if="item.hasChild" class="container">
  118.                                             <div class="row">
  119.                                                 <a class="col-12 d-flex" :href="item.url">
  120.                                                     <span class="cam__categories-link">{{ "cradvancedmenu.skipToCategory"|trans|sw_sanitize }} <strong class="cam__categories-link-bold">${ item.name } {% sw_icon 'arrow-head-right' %}</strong></span>
  121.                                                 </a>
  122.                                             </div>
  123.                                             <div class="row">
  124.                                                 <div v-if="item.twoColumn" class="col-12 cam__categories-col cam__categories-col--two-column">
  125.                                                     <div class="cam__categories-subcategory cam__categories-subcategory--childrens">
  126.                                                         <a class="cam__categories-subcategory-name"
  127.                                                            :href="item.categoryLeft.url">
  128.                                                             ${ item.categoryLeft.name }
  129.                                                         </a>
  130.                                                         <div class="cam__categories-subcategories">
  131.                                                             <div v-for="column in item.columnLeft" class="cam__categories-subcategories-col" :style="{ width: item.categoryLeft.columnWidth}">
  132.                                                                 <a v-for="sub in column" :href="sub.url"
  133.                                                                    class="cam__categories-child" :class="[{'cam__category-highlighted': sub.isHighlighted}, sub.isHighlightedColor]">
  134.                                                                     <span>${ sub.name }</span>
  135.                                                                 </a>
  136.                                                             </div>
  137.                                                         </div>
  138.                                                     </div>
  139.                                                     <div class="cam__categories-subcategory cam__categories-subcategory--childrens">
  140.                                                         <a class="cam__categories-subcategory-name"
  141.                                                            :href="item.categoryRight.url">
  142.                                                             ${ item.categoryRight.name }
  143.                                                         </a>
  144.                                                         <div class="cam__categories-subcategories">
  145.                                                             <div v-for="column in item.columnRight" class="cam__categories-subcategories-col" :style="{ width: item.categoryRight.columnWidth}">
  146.                                                                 <a v-for="sub in column" :href="sub.url"
  147.                                                                    class="cam__categories-child" :class="[{'cam__category-highlighted': sub.isHighlighted}, sub.isHighlightedColor]">
  148.                                                                     <span>${ sub.name }</span>
  149.                                                                 </a>
  150.                                                             </div>
  151.                                                         </div>
  152.                                                     </div>
  153.                                                 </div>
  154.                                                 <div v-else class="col-12 cam__categories-col">
  155.                                                     <div class="cam__categories-subcategory cam__categories-subcategory--childrens">
  156.                                                         <div class="cam__categories-subcategories cam__categories-subcategories--4">
  157.                                                             <div v-for="column in item.chunk" class="cam__categories-subcategories-col" :style="{ width: item.columnWidth}">
  158.                                                                 <a v-for="sub in column" :href="sub.url"
  159.                                                                    class="cam__categories-child" :class="[{'cam__category-highlighted': sub.isHighlighted}, sub.isHighlightedColor]">
  160.                                                                     <span>${ sub.name }</span>
  161.                                                                 </a>
  162.                                                             </div>
  163.                                                         </div>
  164.                                                     </div>
  165.                                                 </div>
  166.                                             </div>
  167.                                         </div>
  168.                                     </div>
  169.                                 </div>
  170.                             </div>
  171.                         </div>
  172.                     </div>
  173.                 </div>
  174.             </div>
  175.         </div>
  176.     {% endif %}
  177.     {{ parent() }}
  178. {% endblock %}