sub-navigation

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