templates/navigation/partials/nav-list.html.twig line 1

Open in your IDE?
  1. {% set level =  level|default(0) %}
  2. {% set id =  id|default('id') %}
  3. {% set navType = navType|default('mega') %}
  5. {% set trackingMainItem = trackingMainItem|default(null) %}
  6. {% set trackingSubItemOne = trackingSubItemOne|default(null) %}
  7. {% set trackingSubItemTwo = trackingSubItemTwo|default(null) %}
  9. <section id="{{ id }}" class="{{ navType }}-nav {{ navType }}-nav--level-{{ level }} {{ styleModifier|default('') }}">
  10.     {% if hasMobileBackLink|default(false) %}
  11.         <button class="js-nav__list-toggle btn-no-styling {{ navType }}-nav--level-{{ level }}__go-back" aria-label="go back" data-nav-level="{{ level }}">
  12.             <span class="icon icon-arrow-left mr-2 {{ navType }}-nav--level-{{ level }}__go-back__icon"
  13.                   aria-label="{{ 'navigation.back'|trans }}"
  14.             ></span>
  16.             <span class="icon icon-{{ mobileBackLinkIcon }} {{ navType }}-nav--level-{{ level }}__go-back__text-icon"
  17.                   aria-hidden="true"></span>
  18.             <span class="{{ navType }}-nav--level-{{ level }}__go-back__text">
  19.                 {{ mobilBackLinkTitle }}
  20.             </span>
  21.         </button>
  22.     {% endif %}
  24.     <ul class="{{ navType }}-nav__list {{ navType }}-nav__list--level-{{ level }} list-unstyled js-nav__list {{ level == 0 ? 'js-nav__base-list' : '' }}" id="{{ id }}--list">
  26.         {% if title | default(null) and level == 1 or level == 2 %}
  27.             {% set trackingKey = 'l_' ~ level ~ '_' ~ title.text|replace({' ': '_'}) ~ '_0' %}
  28.             {% set trackingData = {
  29.                 'trigger': 'click',
  30.                 'datalayer': {
  31.                     'event': 'navigation',
  32.                     'main_item': level > 0 ? trackingMainItem : null,
  33.                     'sub_item_one': level >= 1 ? level == 1 ? title.text|replace({' ': '_'})|lower : trackingSubItemOne : null,
  34.                     'sub_item_two': level >= 2 ? level == 2 ? title.text|replace({' ': '_'})|lower : trackingSubItemTwo : null,
  35.                     'click_item': title.text|replace({' ': '_'})|lower,
  36.                     'click_page_location': title.href
  37.                 }
  38.             } %}
  40.             {% do jsConfig('_trackingData').add({
  41.                 (trackingKey): trackingData
  42.             }) %}
  44.             <li class="{{ navType }}-nav__title {{ navType }}-nav__title--level-{{ level }}" role="heading">
  45.                 <a href="{{ title.href }}"
  46.                    class="{{ navType }}-nav__title-link {{ navType }}-nav__title-link--level-{{ level }}"
  47.                     data-event-tracking-key="{{ trackingKey }}">
  48.                     {{ title.text }}
  49.                 </a>
  50.             </li>
  51.         {% endif %}
  53.         {% for page in pages %}
  55.             {% if page.isVisible() %}
  56.                 {% set isActive = page.isActive %}
  57.                 {% set isOpen = page.isActive %}
  58.                 {% set hasChildren = false %}
  60.                 {% if page.hasPages() %}
  61.                     {% for child in page.getPages() %}
  62.                         {% if child.isVisible() %}
  63.                             {% set hasChildren = true %}
  64.                         {% endif %}
  65.                     {% endfor %}
  66.                 {% endif %}
  68.                 {% set trackingKey = 'l_' ~ level ~ '_' ~ page.label|replace({' ': '_'}) ~ '_0' %}
  69.                 {% set trackingData = {
  70.                     'trigger': 'click',
  71.                     'datalayer': {
  72.                         'event': 'navigation',
  73.                         'main_item': level > 0 ? trackingMainItem : null,
  74.                         'sub_item_one': level >= 1 ? level == 1 ? page.label|replace({' ': '_'})|lower : trackingSubItemOne : null,
  75.                         'sub_item_two': level >= 2 ? level == 2 ? page.label|replace({' ': '_'})|lower : trackingSubItemTwo : null,
  76.                         'click_item': page.label|replace({' ': '_'})|lower,
  77.                         'click_page_location': page.href|replace({' ': '_'})|lower
  78.                     }
  79.                 } %}
  81.                 {% do jsConfig('_trackingData').add({
  82.                     (trackingKey): trackingData
  83.                 }) %}
  85.                 <li class="{{ navType }}-nav__item {{ navType }}-nav__item--level-{{ level }} js-nav__list-item
  86.                     {{ isActive ? 'is-active' : '' }} {{ isOpen ? 'is-open' : '' }}
  87.                     {{ hasChildren ? 'has-children' : 'has-no-children' }}"
  88.                 >
  89.                     {% if hasChildren %}
  90.                         <button aria-label="Open Menu" title="Open Menu" data-nav-level="{{ level }}"
  91.                             class="btn-no-styling {{ navType }}-nav__item-content js-nav__list-toggle {{ navType }}-nav__item-content--level-{{ level }}"
  92.                             data-event-tracking-key="{{ trackingKey }}"
  93.                         >
  94.                             <span class="d-inline-flex align-items-center w-100 justify-content-between">
  95.                                 {{ page.label }}
  96.                                 <span class="icon icon-chevron-right {{ navType }}-nav__item-content--level-{{ level }}__icon" aria-hidden="true"></span>
  97.                                 {% if isActive %}
  98.                                     <span class="visually-hidden-focusable">{{ 'navigation.current'|trans }}</span>
  99.                                 {% endif %}
  100.                             </span>
  101.                         </button>
  102.                         {{ include('navigation/partials/nav-list.html.twig', page | merge ({
  103.                             'level': level + 1,
  104.                             'pages': page.pages,
  105.                             'id': id ~ '-' ~ loop.index,
  106.                             'navType': navType,
  107.                             'parent': level == 0 or level == 1 ? '#' ~ id ~ '--list' : '',
  108.                             'styleModifier': '',
  109.                             'hasMobileBackLink': level == 0 or level == 1 ? true : false,
  110.                             'mobilBackLinkTitle': level == 0 or level == 1 ? page.label  | default(false) : false,
  111.                             'mobileBackLinkIcon': false,
  112.                             'title': {
  113.                                 'href': page.href,
  114.                                 'text':  'navigation.overview'|trans ~ ' ' ~ page.label
  115.                             },
  116.                             'trackingMainItem': level == 0 ? page.label|replace({' ': '_'})|lower : trackingMainItem,
  117.                             'trackingSubItemOne': level == 1 ? page.label|replace({' ': '_'})|lower : trackingSubItemOne,
  118.                             'trackingSubItemTwo': level == 2 ? page.label|replace({' ': '_'})|lower : trackingSubItemTwo
  119.                         }), with_context = false) }}
  120.                     {% else %}
  121.                         <a href="{{ page.href }}" class="{{ navType }}-nav__item-content {{ navType }}-nav__item-content--level-{{ level }} {{ navType }}-nav__item-content--link" data-event-tracking-key="{{ trackingKey }}">
  122.                             {{ page.label }}
  123.                             {% if isActive %}
  124.                                 <span class="visually-hidden-focusable">{{ 'navigation.current'|trans }}</span>
  125.                             {% endif %}
  126.                         </a>
  127.                     {% endif %}
  128.                 </li>
  129.             {% endif %}
  130.         {% endfor %}
  131.     </ul>
  132. </section>