bootstrap_italia-8.x-0.x-dev/components/components-2/list/menu-recursive.html.twig

{#
/**
 * @file
 * Template for link-list recursive component, reccomended for multilevel vertical menu.
 * Docs: https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#liste-annidate
 * Latest revision: v2.8.7
 *
 * Parameters:
 * - menu_name (string) (default: '')
 *   - 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 (obj attributes)
 *   - Drupal attributes
 * - show_link_description (boolean) (default: false)
 * - link_label_wrapper (boolean) (default: true)
 *   - Round label in wrapper
 * - link_label_wrapper_tag (string) (default: 'span')
 *   - Tag to wrap label
 * - large (boolean) (default: false)
 *   - Increment text size on all items
 * - bold (boolean) (default: false)
 *   - Increment text weight on all active items
 * - active_items_large (boolean) (default: false)
 *   - Increment text size on only active items (not enable both with large)
 * - active_items_bold (boolean) (default: false)
 *   - Increment text weight on only active items (not enable both with bold)
 * - first_level_large (boolean) (default: false)
 *   - Increment text size on first level items (not enable both with large)
 * - first_level_bold (boolean) (default: false)
 *   - Increment text weight on first level items (not enable both with bold)
 * - active_assistive_text (string) (default: 'Active')
 * - indent_sub_items (string) (default: '')
 *   - indent link-sublist if contains other levels. Options ['1rem', '24px', '...']
 * - icon_position (string) (default: '')
 *   - options ["left", "right"]
 * - icon_name (string) (default: 'it-chevron-right')
 *   - options ["it-icon-name"]
 * - icon_color (string) (default: 'primary')
 *   - options ["primary", "secondary", "success", "warning", "danger", "light", "white"]
 * - wrapper_component (boolean) (default: false)
 * - linklist_wrapper_classes (array) (default: '')
 *   - Wrap component
 * - wrapper_attributes (obj attribute) (default: '')
 * - list_utility_classes (array) (default: '')
 * - list_attributes (obj attribute) (default: '')
 * - id (string) (default: '')
 *
 * Note: items and attributes are mandatory
 *
  * Examples:
   {% include '@bi-bcl/list/menu-recursive.html.twig' with {
      menu_name: menu_name,
      items: items,
      attributes: attributes,
      show_link_description: false,
      large: false,
      bold: false,
      active_items_large: false,
      active_items_bold: false,
      icon_position: '',
      icon_type: '',
      icon_color: '',
      wrapper_component: true
   } %}
 */
#}
{% import _self as menus %}
{% apply spaceless %}
  {# Set defaults #}
  {% set _menu_name = menu_name|default('') %}
  {% set _show_link_description = show_link_description ?? false %}
  {% set _link_label_wrapper = link_label_wrapper ?? true %}
  {% set _link_label_wrapper_tag = link_label_wrapper_tag|default('span') %}
  {% set _large = large ?? false %}
  {% set _bold = bold ?? false %}
  {% set _active_items_large = active_items_large ?? false %}
  {% set _active_items_bold = active_items_bold ?? false %}
  {% set _first_level_large = first_level_large ?? false %}
  {% set _first_level_bold = first_level_bold ?? false %}
  {% set _active_assistive_text = active_assistive_text|default('Active'|t) %}
  {% set _indent_sub_items = indent_sub_items|default('') %}
  {% set _icon_position = icon_position|default('') %}
  {% set _icon_name = icon_name|default('it-expand') %}
  {% set _icon_color = icon_color|default('primary') %}
  {% set _wrapper_component = wrapper_component ?? false %}
  {% set _linklist_wrapper_classes = linklist_wrapper_classes|default('') %}
  {% set _wrapper_attributes = wrapper_attributes|default('') %}
  {% set _list_utility_classes = list_utility_classes|default('') %}
  {% set _list_attributes = list_attributes|default('') %}
  {% set _id = id|default('') %}

  {# Set options wrapper #}
  {% set _classes_wrapper = [
    'link-list-wrapper',
    _menu_name
  ] %}

  {% if _linklist_wrapper_classes is not empty %}
    {% set _classes_wrapper = _classes_wrapper|merge(linklist_wrapper_classes) %}
  {% endif %}

  {% if _wrapper_attributes is empty %}
    {% set wrapper_attributes = create_attribute() %}
  {% endif %}
  {% set wrapper_attributes = wrapper_attributes.addClass(_classes_wrapper) %}

  {% if _id is not empty %}
    {% set wrapper_attributes = wrapper_attributes.setAttribute('id', _id) %}
  {% endif %}

  {# Set options link-list #}
  {% set _classes_list = [
    'link-list',
  ] %}

  {% if _list_utility_classes is not empty %}
    {% set _classes_list = _classes_list|merge(list_utility_classes) %}
  {% endif %}

  {% if _list_attributes is empty %}
    {% set list_attributes = create_attribute() %}
  {% endif %}
  {% set list_attributes = list_attributes.addClass(_classes_list) %}

  {# Component #}
  {%- if wrapper_component -%}
    <div{{ wrapper_attributes }}>
  {%- endif -%}
    <ul{{ list_attributes }}>
      {{ menus.menu_links(
        items, attributes, 0, _menu_name,
        _show_link_description, _link_label_wrapper, _link_label_wrapper_tag,
        _large, _bold, _active_items_large, _active_items_bold, _first_level_large, _first_level_bold,
        _icon_position, _icon_name, _icon_color,
        _active_assistive_text, _indent_sub_items, libraries_cdn_icons
      ) }}
    </ul>
  {%- if wrapper_component %}
    </div>
  {% endif -%}
{% endapply %}

{% macro menu_links(
  items, attributes, menu_level, menu_name,
  show_link_description, link_label_wrapper, link_label_wrapper_tag,
  large, bold, active_items_large, active_items_bold, first_level_large, first_level_bold,
  icon_position, icon_name, icon_color,
  active_assistive_text, indent_sub_items, libraries_cdn_icons
  ) %}
  {% import _self as menus %}

  {%- if items -%}
    {%- for uuid, item in items -%}
      <li{{ item.attributes }}>

        {# Rare and unlikely case #}
        {%- if item.title == '<hidden>' -%}
          {% set item = item|merge({'title':'Menu'|t}) %}
        {%- endif -%}

        {%- if item.title == '<divider>' -%}
          <span class="divider"></span>

        {%- elseif item.url.isRouted and item.url.routeName == '<nolink>' and menu_level > 1 -%}
          <div class="link-list-heading">{{ item.title }}</div>

        {%- else -%}
          {% set item_classes = [
            'list-item',
            item.in_active_trail ? 'active',
            item.in_active_trail and active_items_large and not large ? 'large',
            item.in_active_trail and active_items_bold and not bold ? 'medium',
            large ? 'large',
            bold ? 'medium',
            first_level_large and menu_level == 0 ? 'large',
            first_level_bold and menu_level == 0 ? 'medium',
            item.is_expanded and icon_position is not empty ? 'icon-'~icon_position,
            item.is_expanded and icon_position is empty ? 'right-icon',
            not item.is_expanded and icon_position == 'left' ? 'icon-left',
            not item.is_expanded and icon_position == 'right' ? 'right-icon',
          ] %}

          {% set item_attributes = item.attributes %}

          {% set item_attributes = item_attributes.addClass(item_classes) %}

          {%- if item.original_link.getDescription() -%}
            {% set item_attributes = item_attributes.setAttribute('title', item.original_link.getDescription()) %}
          {%- else -%}
            {% set item_attributes = item_attributes.setAttribute('title', 'Go to: ' ~ item.title) %}
          {%- endif -%}

          {% set aria_id = menu_name ~ '--menu-recursive--' ~ uuid|clean_id %}

          {%- if item.is_expanded -%}
            {% set item_attributes = item_attributes
              .setAttribute('data-bs-toggle', 'collapse')
              .setAttribute('data-bs-target', '#'~aria_id)
              .setAttribute('aria-expandend', 'false')
              .setAttribute('aria-controls', aria_id)
              .setAttribute('href', '#'~aria_id)
              .setAttribute('role', 'button')
            %}
          {%- else -%}
            {% set item_attributes = item_attributes.setAttribute('href', item.url|render()) %}
          {%- endif -%}

          {%- if item.url.external -%}
            {% set item_attributes = item_attributes
              .setAttribute('target', '_blank')
              .setAttribute('rel', 'nofollow')
              .setAttribute('aria-label', item.title ~ ' - ' ~ 'External link'|t ~ ' - ' ~ 'New window'|t)
            %}
          {%- endif -%}

          {% set _enable_icon_wrapper = icon_position is not empty or item.is_expanded ? true : false %}

          <a{{- item_attributes -}}>
            {%- if _enable_icon_wrapper -%}
              <span class="list-item-title-icon-wrapper">
            {%- endif -%}

              {% set _item_icon_name = item.is_expanded ? 'it-expand' : icon_name %}
              {% set _item_icon_position = icon_position is empty and item.is_expanded ? 'right' : icon_position %}

              {%- if _item_icon_position == 'left' -%}
                {% include '@bi-bcl/icon/icon.html.twig' with {
                  name: _item_icon_name,
                  color: icon_color,
                  size: 'sm',
                  icon_classes: ['left']
                } %}
              {%- endif -%}

              {%- if link_label_wrapper -%}
                <{{ link_label_wrapper_tag }} class="list-item-title">{{- item.title -}}</{{ link_label_wrapper_tag }}>
              {%- else -%}
                {{- item.title -}}
              {%- endif -%}

              {%- if item.in_active_trail -%}
                <span class="visually-hidden">{{ active_assistive_text }}</span>
              {%- endif -%}

              {%- if _item_icon_position == 'right' -%}
                {% include '@bi-bcl/icon/icon.html.twig' with {
                  name: _item_icon_name,
                  color: icon_color,
                  size: 'sm',
                  icon_classes: ['right']
                } %}
              {%- endif -%}

            {%- if _enable_icon_wrapper -%}
              </span>
            {%- endif -%}

            {%- if item.original_link.getDescription() and show_link_description -%}
              <p>{{ item.original_link.getDescription() }}</p>
            {%- endif -%}
          </a>
        {%- endif -%}

        {# Recursive link-list #}
        {%- if item.below -%}
          <ul id="{{ aria_id }}"
              class="link-sublist collapse{{ item.in_active_trail ? ' show' }}"
              {% if indent_sub_items is not empty %}style="margin-left: {{ indent_sub_items }}"{% endif %}
          >
            {{- menus.menu_links(
              item.below, attributes, menu_level + 1, menu_name,
              show_link_description, link_label_wrapper, link_label_wrapper_tag,
              large, bold, active_items_large, active_items_bold, first_level_large, first_level_bold,
              icon_position, icon_name, icon_color,
              active_assistive_text, indent_sub_items, libraries_cdn_icons
            ) -}}
          </ul>
        {%- endif -%}

      </li>
    {%- endfor -%}
  {%- endif -%}
{% endmacro %}