sector_megamenu-1.0.2/components/megamenu/root/root.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)
 */
#}
{% import _self as menus %}

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

{% if items %}
<div class="@container">
  <nav {{ attributes.addClass(nav_classes) }} aria-label="{{ id }}" id="{{ 'nav-' ~ id }}">
    <ul class="mega-menu__list" id="{{ id }}">
        {% block items %}
        {% for item in items %}
            {% set toggle_attributes = create_attribute() %}
            {% set link_attributes = create_attribute() %}
            {% set nav_item_classes = [
                'mega-menu__item',
                'mega-menu__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'] %}
            {% 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.below %}
                {% set toggle_attributes = toggle_attributes.setAttribute('aria-controls', 'sector-megamenu-body-' ~ aria_id) %}
            {% endif %}
            {% if item.current %}
                {% set link_attributes = link_attributes.setAttribute('aria-current', 'page') %}
            {% endif %}
            {% if item.in_active_trail %}
                {% set toggle_attributes = toggle_attributes.addClass('is-active') %}
            {% endif %}
            <li{{ item.attributes.addClass(nav_item_classes) }}>
            {% if item.below %}
                <button type="button" {{ toggle_attributes.addClass([ 'mega-menu__toggle' ]) }} aria-expanded="false" aria-controls="{{ aria_id }}">
                    {% if item.extra.translation and translation_language %}
                    <span class="menu__translation" translate="no" lang="{{ translation_language }}">{{ item.extra.translation }}</span>
                    {% endif %}
                    {{ item.title }}
                    <span class="material-symbols-sharp" aria-hidden="true">expand_more</span>
                </button>
            {% else %}
                <a href="{{item.url}}" {{ link_attributes.addClass(nav_link_classes|join(' ')) }}>
                    {% if item.extra.translation and translation_language %}
                        <span class="menu__translation" translate="no" lang="{{ translation_language }}">{{ item.extra.translation }}</span>
                    {% endif %}
                    {{ item.title }}
                </a>
            {% endif %}
            </li>
        {% endfor %}
        {% endblock %}
    </ul>
  </nav>
</div>
{% endif %}