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') }}
{% 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"><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></li>
{% endif %}
</ul>