Header

// src/components/template-components/header/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header
additionalProperties: false
required:
  - main_navigation
  - meta_navigation
  - search_form_action_url
  - donation_url
properties:
  main_navigation:
    $ref: /template-components/header/main-navigation
  meta_navigation:
    $ref: /template-components/header/meta-navigation
  search_form_action_url:
    $ref: /template-components/header/search-bar
  tenant:
    type: string
  donation_url:
    type: string
    format: uri-reference
  frontpage_url:
    type: string
    format: uri-reference

// src/components/template-components/header/mocks.yaml

main_navigation:
  $ref: /template-components/header/main-navigation
meta_navigation:
  $ref: /template-components/header/meta-navigation
search_form_action_url:
  $ref: /template-components/header/search-bar
donation_url: '#url'
frontpage_url: url
$variants:
  - $name: Kids
    tenant: kids
  - $name: Jugend
    tenant: jags

// 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>