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 %}
<ul class="mobile-bar {{ modifier_class }}">
<li class="mobile-bar__item"><a
data-toggle-class="menu-is-visible"
data-target=".js-m-dropdown"
href="#header-m-dropdown" class="btn mobile-bar__btn mobile-bar__btn--bars">{{ icons.get('bars', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Menu</span></a></li>
{# Don't show additional menu items if this is using the basic style. #}
{% if not modifier_class == 'mobile-bar--basic' %}
<li class="mobile-bar__item"><a
data-toggle-class="search-is-visible"
data-target=".js-m-dropdown"
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>