Mobile Bar
The mobile bar controls the menu on smaller viewport widths. Only shown for smaller devices. Resize the browser to see the component.
{{ attach_library('h4h_theme/mobile-bar') }}
{{ attach_library('h4h_theme/donate') }}
{% set donate_url = donate_fallback.link %}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{# Allow parent components to modify the togglers data target selector. #}
{% set data_target = data_target|default('.js-m-dropdown') %}
<ul class="mobile-bar {{ modifier_class }}">
<li class="mobile-bar__item">
<a
data-toggle-class="menu-is-visible"
data-target="{{ data_target }}"
href="#header-m-dropdown" class="btn mobile-bar__btn mobile-bar__btn--bars">{{ icons.get(icon_name|default('bars'), 'icon mobile-bar__icon') }}<span class="mobile-bar__text">{{ menu_bar_text|default('Menu') }}</span></a>
</li>
{# Don't show additional menu items if this is using the basic style. #}
{% if modifier_class != 'mobile-bar--basic' %}
<li class="mobile-bar__item"><a
data-toggle-class="search-is-visible"
data-target="{{ data_target }}"
href="#header-m-dropdown" class="btn mobile-bar__btn mobile-bar__btn--search">{{ icons.get('search', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Search</span></a>
</li>
<li class="mobile-bar__item mobile-bar__item--donate">
{% if donate_menu.items is empty %}
{# Non-NA pages always use the "fallback", which is populated by the Area
Editions's link options. #}
<a href="{{ donate_url }}" class="btn mobile-bar__btn mobile-bar__btn--heart">{{ icons.get('heart', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Donate</span></a>
{% else %}
{# Fallback for no JS #}
<a href="{{ donate_url }}" class="btn btn--no-js mobile-bar__btn mobile-bar__btn--heart">{{ icons.get('heart', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Donate</span></a>
{# Button used to toggle menu visibility #}
<button class="btn mobile-bar__donate-btn mobile-bar__btn mobile-bar__btn--heart" id="mobile-donate-button" aria-label="donate toggle button" aria-pressed="false">{{ icons.get('heart', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Donate</span></button>
<ul class="donate-menu__list donate-menu__list--mobile" id="mobile-donate-dropdown" aria-expanded="false" aria-label="donate menu items">
{% for item in donate_menu.items %}
<li class="donate-menu__item js-donate-menu__item" role="menuitem">
<a class="donate-menu__link js-donate-menu__link" href="{{ item.link }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
</ul>