header

// src/components/template-components/header/header.html.twig

{% set meta_navigation = meta_navigation|merge({
  class: "Header-metaNavigation",
  has_search: true,
  variant: "desktop",
}) %}

{% set search_bar = search_form_action_url|merge({
  class: "Header-searchBar"
}) %}

{% set main_navigation = main_navigation|merge({
  meta_navigation: meta_navigation,
  class: "Header-mainNavigation"
}) %}

<header class="Header js-Header{% if tenant %} Header--{{ tenant }}{% endif %}">
  {% include "@template-components/header/meta-navigation/meta-navigation.html.twig" with meta_navigation only %}
  <div class="Header-content u-container">
    <a href="{{ frontpage_url }}" class="Header-logo" aria-label="Homepage">
      {% include "@elements/icon/icon.html.twig" with {
        name: tenant ? "logo--" ~ tenant : "logo",
        class: "Header-logoIcon is-light"
      } only %}
    </a>
    {% include "@template-components/header/main-navigation/main-navigation.html.twig" with main_navigation only %}
    {% include "@template-components/header/search-bar/search-bar.html.twig" with search_bar only %}
    {% if tenant != "kids" and donation_url %}
      {% include "@elements/button/button.html.twig" with {
        class: "Header-donationButton Tracking--donationCtaHeader",
        icon: "heart",
        icon_left: true,
        label: '<span class="Header-donationButtonPrefix">Jetzt&nbsp;</span>spenden',
        mutation: "donation",
        url: donation_url
      } only %}
    {% endif %}
  </div>
</header>