sector_megamenu-1.0.2/components/megamenu/body/body.twig

{# This is a Single Directory Component which only renders a megamenu via Javascript #}
{#
/**
 * @file
 * Template for a Nav component.
 *
 * Available config:
 * - alignment: left | right | center | vertical.
 * - style: tabs | pills
 * - fill: fill | justify
 * - utility_classes: An array of utility classes.
 * - render_toggle: boolean (which effects attributes: data-behavior: toggle)
 */.setAttribute('aria-expanded', false)
#}
{% import _self as menus %}

{% set nav_classes = [ 'mega-menu-body' ]|merge(utility_classes ? utility_classes : []) %}

{% if items %}
  <nav {{ attributes.addClass(nav_classes) }}>
    {% block items %}
      <div class="@container">
        {% for item in items %}
          {% set toggle_attributes = create_attribute() %}
          {% set link_attributes = create_attribute() %}
          {% set nav_item_classes = [
              'mega-menu-body__item',
              'mega-menu-body__item--level-' ~ (menu_level + 1),
              item.in_active_trail ? 'mega-menu__item--active-trail',
              item.below ? 'mega-menu__item--has-children',
              item.published == false ? 'unpublished'
          ] %}
          {% set nav_link_classes = ['mega-menu__link', 'mega-menu__heading-link'] %}
          {% set aria_id = (item.title ~ '-mm-' ~ loop.index )|clean_id %}
          {% if item.url.options.attributes.class is iterable %}
            {% set nav_link_classes = nav_link_classes|merge(item.url.options.attributes.class) %}
          {% elseif item.url.options.attributes.class %}
            {% set nav_link_classes = nav_link_classes|merge([item.url.options.attributes.class]) %}
          {% endif %}
          {% if item.current %}
            {% set link_attributes = link_attributes.setAttribute('aria-current', 'page') %}
          {% endif %}
          {% if item.below %}
          <dialog{{ item.attributes.setAttribute('id', 'sector-megamenu-body-' ~ aria_id).addClass(nav_item_classes) }} tabindex="-1" aria-modal="true" aria-expanded="false" aria-hidden="true">
            <div class="mega-menu-body__heading">
              <{{heading_elem}}>
                {% if item.extra.translation and translation_language %}<span class="mega-menu__heading--translation" translate="no" lang="{{ translation_language }}">{{ item.extra.translation }}</span>{% endif %}
                {{- item.title -}}
              </{{heading_elem}}>
              {% if heading_link_text %}
                {{- link(heading_link_text, item.url, link_attributes.addClass(nav_link_classes|join(' '))) -}}
              {% endif %}
            </div>

              {% if item.below %}
                {{ include('sector_megamenu:subnav', {
                  id: 'sub-nav-' ~ aria_id,
                  utility_classes: [ 'mega-menu__menu', 'hidden' ],
                  items: item.below,
                  render_submenu_toggle: false,
                  parent_item: link(item.title, item.url, { 'class': ['mega-menu__link']}),
                  menu_level: menu_level + 1,
                  translation_language: translation_language
                }) }}
              {% endif %}
          </dialog>
          {% endif %}
        {% endfor %}
      </div>
    {% endblock %}
  </nav>
{% endif %}