Main Menu
This is the main site menu. It expands to reveal subnavigation.
{{ attach_library('h4h_theme/main-menu') }}
{# Set an item count to fix small menus being too spread out #}
{% if items|length < 6 %}
{% set menu_width = 'small' %}
{% else %}
{% set menu_width = 'wide' %}
{% endif %}
<nav class="main-menu {{ modifier_class }} main-menu--{{ menu_width }}" id="js-main-menu">
<ul class="main-menu__list">
{# First Level of menu items. #}
{% for item in items %}
{% if item.subitems %}
{#
We need to see how deep the menu goes.
Set a temp variable that'll let us use it later to add a class.
#}
{% set superdeep = false %}
{% for subitem in item.subitems %}
{% if subitem.subitems %}
{% set superdeep = true %}
{% endif %}
{% endfor %}
{% endif %}
{# If there are no subitems set a last-child class on the last menu item. #}
{% set last_child = not item.subitems ? ' js-main-menu-last' %}
<li class="main-menu__item js-main-menu-item main-menu__item--top {{ not superdeep ? 'main-menu__relative' }}">
<a class="main-menu__link js-main-menu-link{{ last_child }}" href="{{ item.link }}">{{ item.text }}</a>
{# Second Level of menu items. #}
{% if item.subitems %}
<div class="main-menu__container">
{% if superdeep %}
<ul class="main-menu__sub-list main-menu__sub-list-1">
{% else %}
<div class="main-menu__sub-list">
<ul class="main-menu__sub-list-2">
{% endif %}
{% for subitem in item.subitems %}
<li class="{{ superdeep ? 'main-menu__item--child' : 'main-menu__item--last' }}">
<a class="{{ superdeep ? '' : 'main-menu__link-max' }}{{ not subitem.subitems and loop.last ? ' js-main-menu-last' }}" href="{{ subitem.link }}">{{ subitem.text }}</a>
{# Third Level of menu items. #}
{% if subitem.subitems %}
<ul class="main-menu__subsub-list">
{% for subsubitem in subitem.subitems %}
<li class="main-menu__item main-menu__item--last">
<a class="main-menu__link-max{{ loop.last ? ' js-main-menu-last' }}" href="{{ subsubitem.link }}">{{ subsubitem.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% if superdeep %}
</ul>
{% else %}
</ul>
</div>
{% endif %}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{#
On Smaller displays, add all items except for the first three
to a expandable submenu. Only for non-main-menu--basic menus.
#}
{% if not modifier_class == 'main-menu--basic' %}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="main-menu-ex">
<button class="main-menu-ex__btn btn"
data-toggle-class="is-visible"
data-target=".js-menu-ex">{{ icons.get('bars', 'main-menu-ex-bar__icon') }} {{ more_text }}</button>
<div class="main-menu-ex__container">
<div class="main-menu-ex__wrapper js-menu-ex">
<ul class="main-menu-ex__list">
{# Return every item except the first three. #}
{% for item in items|slice(3) %}
<li class="main-menu-ex__item">
<a class="main-menu-ex__link" href="{{ item.link }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</nav>