ws_small_y-1.0.x-dev/templates/menu--main.html.twig
templates/menu--main.html.twig
{#
/**
* @file
* Template for the WS Main menu.
*
* Available variables:
* - menu_name: 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.
*
* @ingroup themeable
*/
#}
{{ attach_library('ws_small_y/main_menu') }}
{% import _self as menus %}
<div class="ws-main-menu-wrapper">
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% set nav_classes = [ 'header-nav__links', 'navbar', 'nav', 'row-level-1'] %}
<div class="container">
{% if items %}
<ul{{ attributes.addClass(nav_classes) }}>
{% block items %}
{% for item in items %}
{% set nav_link_classes = item.url.options.attributes.class is iterable
? item.url.options.attributes.class
: [item.url.options.attributes.class]
%}
{% if item.below %}
<li class="dropdown nav-level-2 children">
<a href="{{ item.url }}" class="menu-link--level-1" aria-expanded="false" data-toggle="dropdown">
{{ item.title }}
{% include '@ws_small_y/assets/svg/chevron-down.svg' %}
</a>
{{ menus.menu_links_level_2(item.below, attributes, menu_level + 1, item) }}
</li>
{% else %}
<li class="dropdown nav-level-2">
<a href="{{ item.url }}" target="_self" class="menu-link--level-1">
{{ item.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endblock %}
</ul>
{% endif %}
</div>
{% endmacro %}
{% macro menu_links_level_2(items, attributes, menu_level, parent) %}
{% set level2 = [] %}
{% if items %}
<div class="header-nav__submenu level-2 dropdown-menu">
<div class="container">
<div class="header-nav__submenu-left">
<div class="header-nav__submenu_navigation">
<div class="navigation-top">
{% set navigationLinkLabel = 'Main menu' %}
<span class="fa fa-chevron-left fa-xs" aria-hidden="true"></span>
<a href="#" class="back">{{ navigationLinkLabel }}</a>
</div>
<div class="navigation-bottom">
<a href="{{ parent.url }}" class="main-menu-link--level-1">
{{ parent.title }}
</a>
</div>
</div>
<ul class="header-nav__submenu_links row-level-2">
<div class="dropdown-label">
{% if parent.url|render|trim %}
<a href="{{ parent.url }}" target="_self" class="main-menu-link--level-1">
{{ parent.title }}
</a>
{% else %}
<span class="main-menu-link--level-1">
{{ parent.title }}
</span>
{% endif %}
</div>
{% for item in items %}
{% if item.below %}
{% set ia = item.attributes.addClass(['nav-level-3 children dropdown-submenu menu-item-' ~ item.title|clean_class]) %}
<li{{ ia }}>
{% set item_title %}
{{ item.title }}
{% endset %}
{{ link(item_title, item.url, { 'data-submenu-target' : 'dropdown-' ~ item.title|clean_class, 'class' : ['menu-link-item', 'children']}) }}
{% set level2_item = {'menu_item': item, 'first_level_label': parent.title} %}
{% set level2 = level2|merge([level2_item]) %}
{% else %}
{% set ia = item.attributes.addClass(['nav-level-3 dropdown-submenu menu-item-' ~ item.title|clean_class]) %}
<li{{ ia }}>
{{ link(item.title, item.url, {'class' : 'menu-link-item'}) }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="header-nav__submenu-right">
{% if parent.content.field_cta_block %}
{% include '@y_lb_main_menu_cta_block/menu-cta-block.html.twig' with {
label: parent.content.field_cta_block.0.field_title,
image: parent.content.field_cta_block.0.field_media,
description: parent.content.field_cta_block.0.field_description,
link_title: parent.content.field_cta_block.0.field_menu_cta_link.0['#title'],
link_url: parent.content.field_cta_block.0.field_menu_cta_link.0['#url_title'],
} %}
{% endif %}
{% for item in level2 %}
{{ menus.menu_links_level_3(item.menu_item.below, attributes, menu_level + 1, item.menu_item, item.first_level_label) }}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endmacro %}
{% macro menu_links_level_3(items, attributes, menu_level, parent, first_level_label) %}
{% if items %}
{% set toggle_id = 'dropdown-'~ parent.title|clean_class %}
<div id="{{ toggle_id }}" class="header-nav__submenu level-3">
<div class="container">
<div class="header-nav__submenu_navigation">
<div class="navigation-top">
<span class="fa fa-chevron-left fa-xs" aria-hidden="true"></span>
<a href="#" class="back">{{ first_level_label }}</a>
</div>
<div class="navigation-bottom">
<a href="{{ parent.url }}" class="main-menu-link--level-1">
{{ parent.title }}
</a>
</div>
</div>
<ul class="header-nav__submenu_links row-level-3">
<a href="{{ parent.url }}" class="main-menu-link--level-3">
{{ parent.title }}
</a>
{% for item in items %}
{% set ia = item.attributes.addClass(['nav-level-4 dropdown-submenu menu-item-' ~ item.title|clean_class]) %}
<li{{ ia }}>
{% if item.below %}
{% set item_title %}
{{ item.title }}
{% endset %}
{{ link(item_title, item.url, {'class' : 'menu-link-item'}) }}
{{ menus.menu_links_level_4(item.below, item, attributes, menu_level) }}
{% else %}
{{ link(item.title, item.url) }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endmacro %}
{% macro menu_links_level_4(items, parent, attributes, menu_level) %}
{% if items %}
<ul class="row-level-4">
{% set ia = parent.attributes %}
{% set ia = ia.addClass('nav-level-5') %}
{% for item in items %}
{% set ia = item.attributes %}
{% set ia = ia.addClass('nav-level-5') %}
<li{{ ia }}>
{{ link(item.title, item.url) }}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
</div>
