bootstrap_italia-8.x-0.x-dev/components/components-2/megamenu/navbar-nav.html.twig

{#
/**
 * @file
 * Template for navbar-nav component, reccomended for multilevel horizontal megamenu.
 * Docs: https://italia.github.io/bootstrap-italia/docs/menu-di-navigazione/megamenu/
 * Latest revision: v2.8.7
 *
 * Parameters:
 * - menu_name (string) mandatory
 *   - The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 * - attributes (object) (default: '')
 *   - options ["option1", "option2", "option3", "option4"]
 * - active_assistive_text (string) (default: 'Current page')
 * - show_link_description (boolean) (default: false)
 * - active_items_large (boolean) (default: false)
 * - active_items_bold (boolean) (default: false)
 * - megamenu_responsive_columns (string) (default: 'col-lg-4')
 * - verbose_classes (boolean) (default: false)
 *   - Print more classes
 *
 * Examples:
   {% include '@bi-bcl/megamenu/navbar-nav.html.twig' with {
      menu_name: menu_name,
      items: items,
      attributes: attributes
   } %}
 *
 */
#}
{% apply spaceless %}
  {# Set defaults #}
  {% set _active_assistive_text = active_assistive_text|default('Current page'|t) %}
  {% set _show_link_description = show_link_description ?? false %}
  {% set _active_items_large = active_items_large ?? false %}
  {% set _active_items_bold = active_items_bold ?? false %}
  {% set _megamenu_responsive_columns = megamenu_responsive_columns|default('col-lg-4') %}
  {% set _verbose_classes = verbose_classes ?? false %}

  {# Component #}
  <ul{{ attributes.addClass('navbar-nav') }}>
    {% if items %}
      {% for uuid, item in items %}

        {# Megamenu check - If menu tree contains megamenu #}
        {% set megamenu = false %}
        {% for i in item.below %}
          {# If any of the second levels contain a third, the result will be "true". #}
          {% if megamenu == false %}
            {% set megamenu = i.is_expanded ? true %}
          {% endif %}
        {% endfor %}

        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
          {% set menu_item_type = 'nolink' %}
        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
          {% set menu_item_type = 'button' %}
        {% else %}
          {% set menu_item_type = 'link' %}
        {% endif %}

        {% set item_classes = [
          'nav-item',
          _verbose_classes ? 'nav-item__menu-' ~ menu_name|clean_class,
          _verbose_classes ? 'nav-item__type-' ~ menu_item_type,
          item.in_active_trail ? 'active',
          item.below ? 'dropdown',
          megamenu ? 'megamenu'
        ]
        %}

        {% set link_classes = [
          'nav-link',
          _verbose_classes ? 'nav-link__menu-' ~ menu_name|clean_class,
          _verbose_classes ? 'nav-link__type-' ~ menu_item_type,
          menu_item_type == 'nolink' ? 'disabled',
          item.in_active_trail ? 'active',
          item.below ? 'dropdown-toggle',
        ]
        %}

        <li{{ item.attributes.addClass(item_classes|merge([_verbose_classes ? 'nav-item__level-0'])) }}>
          {% set link_title %}
            <span>{{ item.title }}</span>
          {% endset %}

          {% if item.below %}
            {% set aria_id = menu_name ~ '--navbar-nav--' ~ uuid|clean_id %}
            {% set dropdown_toggle %}
              {{ link_title }}
              {% include '@bi-bcl/icon/icon.html.twig' with {
                name: 'it-expand',
                size: 'xs'
              } %}
            {% endset %}
            {{ link(dropdown_toggle, item.url, {
              'class': link_classes,
              'data-bs-toggle': 'dropdown',
              'aria-expanded': 'false',
              'aria-haspopup': 'true',
              'id': aria_id,
              'role': 'button'
            }) }}
          <div class="dropdown-menu" role="region" aria-labelledby="{{ aria_id }}">

            {% if megamenu %}
              <div class="row">
              {% for item in item.below %}
                <div class="col-12 {{ _megamenu_responsive_columns }}">
                  <div class="link-list-wrapper">

                    {# If a hidden item #}
                    {% if item.title == '<hidden>' or item['#title'] == '<hidden>' or
                          item.title == '<divider>' or item['#title'] == '<divider>'
                    %}
                      {# No output. #}

                    {# If a Nolink list heading item #}
                    {% elseif
                      (item.url.isRouted and item.url.routeName == '<nolink>') or
                      (item['#url'].isRouted and item['#url'].routeName == '<nolink>') or
                      (item.url.isRouted and item.url.routeName == '<button>') or
                      (item['#url'].isRouted and item['#url'].routeName == '<button>')
                    %}
                      <div class="it-heading-link-wrapper">
                        <a class="it-heading-link" role="heading">{{ item.title }}</a>
                      </div>

                    {% else%}
                      <div class="it-heading-link-wrapper">
                        {% include '@bi-bcl/list/linklist-item.html.twig' with { item: item, linklist_item_classes: ['it-heading-link'] } %}
                      </div>
                    {% endif %}

                    <ul class="link-list">
                      {% for item in item.below %}
                        {% include '@bi-bcl/list/linklist-item.html.twig' with {
                          item: item,
                          level: '2',
                          list_type: 'dropdown',
                          wrapper_tag: 'li',
                          title_wrapper_tag: 'span',
                          verbose_classes: _verbose_classes,
                          active_items_large: _active_items_large,
                          active_items_bold: _active_items_bold,
                          show_link_description: _show_link_description,
                          active_assistive_text: _active_assistive_text,
                          show_icon: true
                        } %}
                      {% endfor %}
                    </ul>
                  </div>
                </div>
              {% endfor %}
              </div>{# End megamenu #}
            {% else %}
              <div class="link-list-wrapper">
                {% set link_list_attributes = create_attribute() %}
                {% set link_list_attributes = link_list_attributes.addClass('link-list') %}

                {# Compliance C.SC.1.5 School #}
                {% if item.url.options['attributes']['data-element-child'] %}
                  {% set link_list_attributes = link_list_attributes.setAttribute('data-element', item.url.options['attributes']['data-element-child']) %}
                {% endif %}

                <ul{{ link_list_attributes }}>
                  {% for item in item.below %}
                    {% include '@bi-bcl/list/linklist-item.html.twig' with {
                      item: item,
                      level: '1',
                      list_type: 'dropdown',
                      wrapper_tag: 'li',
                      title_wrapper_tag: 'span',
                      verbose_classes: _verbose_classes,
                      active_items_large: _active_items_large,
                      active_items_bold: _active_items_bold,
                      show_link_description: _show_link_description,
                      active_assistive_text: _active_assistive_text,
                    } %}
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
            </div>{# End Dropdown. #}

          {% else %}
            {% set level0_classes = [
              _verbose_classes ? 'nav-link__level-0',
              item.in_active_trail ? 'active',
            ] %}
            {% set level0_attributes = create_attribute() %}
            {% set level0_attributes = level0_attributes
              .addClass(link_classes)
              .addClass(level0_classes)
            %}
            {% if item.url.external %}
              {% set level0_attributes = level0_attributes
                .setAttribute('target', '_blank')
                .setAttribute('rel', 'nofollow')
                .setAttribute('aria-label', item.title ~ ' - ' ~ 'External link'|t ~ ' - ' ~ 'New window'|t)
              %}
            {% endif %}
            {{ link(link_title, item.url, level0_attributes) }}
          {% endif %}

        </li>
      {% endfor %}
    {% endif %}
  </ul>
{% endapply %}