Sub navigation

// src/components/patterns/sub-navigation/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/sub-navigation
additionalProperties: false
required:
  - sub_navigation
properties:
  sub_navigation:
    type: array
    items:
      type: object
      required:
        - label
        - url
      properties:
        label:
          type: string
        url:
          type: string
          format: uri-reference
        active:
          type: boolean

// src/components/patterns/sub-navigation/mocks.yaml

sub_navigation:
  - label: Kids-Startseite
    url: url
    active: true
  - label: Über uns
    url: url
  - label: Themen
    url: url
  - label: Mitmachen
    url: url
  - label: Videos
    url: url

// src/components/patterns/sub-navigation/sub-navigation.html.twig

<nav class="SubNavigation js-SubNavigation u-container">
  <p class="SubNavigation-copy u-typo-copy-small">Wähle einen Bereich, der Dich interessiert:</p>
  {% for item in sub_navigation %}
    {% if item.active %}
      <template class="js-SubNavigation-buttonTemplate">
        <button class="SubNavigation-button js-SubNavigation-button" type="button" aria-expanded="false" aria-controls="SubNavigation-content" id="SubNavigation-button">
          {{ item.label }}
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "SubNavigation-buttonIcon"
          } only %}
        </button>
      </template>
    {% endif %}
  {% endfor %}
  <div class="SubNavigation-content js-SubNavigation-content" aria-labelledby="SubNavigation-button" id="SubNavigation-content">
    <ul class="SubNavigation-list js-SubNavigation-list" >
      {% for item in sub_navigation %}
        <li class="SubNavigation-item">
          <a href="{{ item.url }}" class="SubNavigation-link js-SubNavigation-link{% if item.active %} SubNavigation-link--active{% endif %}"{% if item.active %} aria-current="page"{% endif %}>{{ item.label }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

{# To hide the content as fast as possible if javascript is enabled in the browser #}
<script>
  const viewPortWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
  if (viewPortWidth < 960) {
    document.querySelector(".js-SubNavigation-content").style.height = "0";
  }
</script>