Main navigation

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

$schema: http://json-schema.org/draft-07/schema#
$id: /template-components/header/main-navigation
required:
  - main_navigation
  - meta_navigation
additionalProperties: false
properties:
  main_navigation:
    type: array
    items:
      type: object
      properties:
        label:
          type: string
        url:
          type: string
        dropdown_menu:
          $ref: /template-components/header/main-navigation/dropdown-menu
      required:
        - label
  meta_navigation:
    $ref: /template-components/header/meta-navigation
  tracking_class:
    type: string

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

main_navigation:
  - label: Klimaschutz
    dropdown_menu:
      $ref: >-
        /template-components/header/main-navigation/dropdown-menu#climate-protection
  - label: Biodiversität
    dropdown_menu:
      $ref: /template-components/header/main-navigation/dropdown-menu#biodiversity
  - label: Frieden
    url: url
  - label: Spenden
    dropdown_menu:
      $ref: /template-components/header/main-navigation/dropdown-menu#donations
  - label: Mitmachen
    dropdown_menu:
      $ref: /template-components/header/main-navigation/dropdown-menu#participate
  - label: Über uns
    dropdown_menu:
      $ref: /template-components/header/main-navigation/dropdown-menu#about-us
meta_navigation:
  $ref: /template-components/header/meta-navigation

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

{% set meta_navigation = meta_navigation|merge({
  class: "MainNavigation-metaNavigation",
  has_search: false,
  variant: "mobile",
}) %}

{% set tracking_class = "Tracking--mainNavigationLink" %}

<div class="MainNavigation js-MainNavigation{% if class %} {{ class }}{% endif %}">
  <button class="MainNavigation-button js-MainNavigation-button" type="button">
    {% include "@elements/icon/icon.html.twig" with {
      name: "menu",
      class: "MainNavigation-buttonIcon MainNavigation-buttonIcon--menu"
    } only %}
    {% include "@elements/icon/icon.html.twig" with {
      name: "cross",
      class: "MainNavigation-buttonIcon MainNavigation-buttonIcon--cross"
    } only %}
    <span class="MainNavigation-buttonText u-typo-copy-small">Menü</span>
  </button>
  <nav class="MainNavigation-nav js-MainNavigation-nav" aria-label="Hauptnavigation">
    <div class="MainNavigation-content">
      <ul class="MainNavigation-list">
        {% for item in main_navigation %}
          <li class="MainNavigation-item">
            {% if item.dropdown_menu %}
              <button class="MainNavigation-label js-MainNavigation-label" title="{{ item.label }}" type="button">
                {{ item.label }}
                {% include "@elements/icon/icon.html.twig" with {
                  name: "chevron",
                  class: "MainNavigation-labelIcon"
                } only %}
              </button>
              {% include "@template-components/header/main-navigation/dropdown-menu/dropdown-menu.html.twig" with {
                overview_link: item.dropdown_menu.overview_link,
                menu: item.dropdown_menu.menu,
                class: "MainNavigation-dropdownMenu",
                tracking_class: tracking_class
              } only %}
            {% else %}
              <a class="MainNavigation-label{% if tracking_class %} {{ tracking_class }}{% endif %}" href="{{ item.url }}">
                {{ item.label }}
              </a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
      {% include "@template-components/header/meta-navigation/meta-navigation.html.twig" with meta_navigation only %}
    </div>
  </nav>
</div>