Header
The header is made up of the following components:
{{ attach_library('h4h_theme/header') }}
{# Include the main sprite with icons used by the header and footer. #}
{% include "@h4h_theme/icons/assets/sprite.svg.twig" %}
<header role="banner" class="header">
<div class="header__left">
{%
include "@h4h_theme/site-logo/site-logo.twig" with {
link: logo.link,
espanol: logo.espanol
} only
%}
</div>
<div class="header__mobile">
{%
include "@h4h_theme/mobile-bar/mobile-bar.twig" with {
donate_menu: mobile_donate_menu,
donate_button: mobile_donate_button,
donate_fallback: mobile_donate_fallback
} only
%}
</div>
<div class="header__right js-m-dropdown" id="header-m-dropdown">
<div class="header__top-bar">
<div class="header__search js-header-search" id="site-search">
{#
First try to see if the search var contains any subitems.
If so it's not the rendered search block so we need to include
the style guide search component.
#}
{% if search.label %}
{%
include "@h4h_theme/site-search/site-search.twig" with {
label: search.label
} only
%}
{# If it doesn't contain subitems it's the rendered search block. #}
{% else %}
{{ search }}
{% endif %}
</div>
<div class="header__social">
{%
include "@h4h_theme/social-bar/social-bar.twig" with {
items: social.items
} only
%}
</div>
<div class="header__donate">
{%
include "@h4h_theme/donate/donate.twig" with {
donate_button: donate_button,
donate_fallback: donate_fallback,
donate_menu: donate_menu,
more_text: more_text
} only
%}
</div>
</div>
<div class="header__nav">
{%
include "@h4h_theme/main-menu/main-menu.twig" with {
items: menu.items,
more_text: menu.more_text
} only
%}
</div>
</div>
</header>