Navigation: Dropdown-Untermenüs für Fußball und Verein

navigation.json gruppiert Fußball (Übersicht, Mannschaften, Jugend) und
Verein (Übersicht, Historie) als children. nav.php rendert Disclosure-Buttons
mit aria-expanded/-controls; ohne JS per CSS :hover/:focus-within bedienbar.
nav.js ergänzt Toggle, Escape (Untermenü zuerst, dann Overlay) und
Klick-außerhalb-schließt. Kontakt-CTA aus der Nav entfernt.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv

app/components/nav.php

@@ -4,7 +4,10 @@ declare(strict_types=1);
 
 /**
  * Hauptnavigation aus data/navigation.json. Props: $current (Slug).
- * Burger-Toggle übernimmt assets/js/nav.js (aria-expanded/aria-controls).
+ * Burger-Toggle + Dropdowns übernimmt assets/js/nav.js.
+ * Dropdowns funktionieren auch ohne JS (CSS :hover / :focus-within); JS ergänzt
+ * nur aria-expanded, Escape und Klick-außerhalb-schließt.
+ * CTAs rendert der Header (site-header__actions) — nicht hier.
  */
 $nav = json_load('navigation');
 
@@ -20,14 +23,32 @@ $href = static function (string $slug): string {
                 </button>
                 <ul class="site-nav__list" id="site-nav-list">
 <?php foreach ($nav['main'] as $item): ?>
-                    <li>
+<?php if (!empty($item['children'])): ?>
+<?php
+    $submenuId = 'submenu-' . preg_replace('/[^a-z0-9]+/', '-', strtolower($item['label']));
+    $childActive = false;
+    foreach ($item['children'] as $child) {
+        if ($child['slug'] === $current) {
+            $childActive = true;
+            break;
+        }
+    }
+?>
+                    <li class="site-nav__item site-nav__item--has-submenu">
+                        <button class="site-nav__sublink" type="button" aria-expanded="false" aria-controls="<?= e($submenuId) ?>"<?= $childActive ? ' data-current' : '' ?>><?= e($item['label']) ?><?= icon('chevron-down', 'site-nav__chevron') ?></button>
+                        <ul class="site-nav__submenu" id="<?= e($submenuId) ?>">
+<?php foreach ($item['children'] as $child): ?>
+                            <li>
+                                <a href="<?= e($href($child['slug'])) ?>"<?= $child['slug'] === $current ? ' aria-current="page"' : '' ?>><?= e($child['label']) ?></a>
+                            </li>
+<?php endforeach; ?>
+                        </ul>
+                    </li>
+<?php else: ?>
+                    <li class="site-nav__item">
                         <a href="<?= e($href($item['slug'])) ?>"<?= $item['slug'] === $current ? ' aria-current="page"' : '' ?>><?= e($item['label']) ?></a>
                     </li>
-<?php endforeach; ?>
+<?php endif; ?>
-<?php foreach ($nav['ctas'] ?? [] as $cta): ?>
-                    <li class="site-nav__cta">
-<?php component('cta', ['cta' => $cta]); ?>
-                    </li>
 <?php endforeach; ?>
                 </ul>
             </nav>

data/navigation.json

@@ -1,15 +1,28 @@
 {
   "main": [
     { "label": "Startseite", "slug": "" },
-    { "label": "Aktuelles", "slug": "#aktuelles" },
+    {
-    { "label": "Jugendfußball", "slug": "jugendfussball" },
+      "label": "Fußball",
-    { "label": "Fußball", "slug": "fussball" },
+      "slug": "fussball",
+      "children": [
+        { "label": "Übersicht", "slug": "fussball" },
+        { "label": "1. Mannschaft", "slug": "fussball/erste-mannschaft" },
+        { "label": "2. Mannschaft", "slug": "fussball/zweite-mannschaft" },
+        { "label": "Damenmannschaft", "slug": "fussball/damen" },
+        { "label": "Jugendfußball", "slug": "jugendfussball" }
+      ]
+    },
     { "label": "Turnen", "slug": "turnen" },
-    { "label": "Der Verein", "slug": "der-verein" },
+    {
-    { "label": "Matchcenter", "slug": "matchcenter" }
+      "label": "Der Verein",
+      "slug": "verein",
+      "children": [
+        { "label": "Übersicht", "slug": "verein" },
+        { "label": "Historie", "slug": "historie" }
+      ]
+    }
   ],
   "ctas": [
-    { "label": "Kontakt", "slug": "kontakt", "style": "outline" },
     { "label": "Mitglied werden", "slug": "mitglied-werden", "style": "primary" }
   ],
   "legal": [

public/assets/js/nav.js

@@ -1,4 +1,7 @@
-/* Burger-Navigation: Toggle mit aria-expanded, Escape schließt, Klick auf Link schließt. */
+/* Navigation: Burger-Overlay (aria-expanded, Escape, Klick auf Link schließt)
+   + Dropdown-Untermenüs als Disclosure (Klick togglet aria-expanded).
+   Die Untermenüs sind auch ohne JS per CSS (:hover/:focus-within) bedienbar;
+   JS macht den Zustand für Screenreader sichtbar und ergänzt Escape/Außerklick. */
 (function () {
     'use strict';
 
@@ -8,10 +11,23 @@
         return;
     }
 
+    var subToggles = Array.prototype.slice.call(list.querySelectorAll('.site-nav__sublink'));
+
+    function closeSubmenus(except) {
+        subToggles.forEach(function (btn) {
+            if (btn !== except) {
+                btn.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
+
     function setOpen(open) {
         toggle.setAttribute('aria-expanded', String(open));
         document.body.classList.toggle('nav-open', open);
         toggle.querySelector('.visually-hidden').textContent = open ? 'Menü schließen' : 'Menü öffnen';
+        if (!open) {
+            closeSubmenus(null);
+        }
     }
 
     toggle.addEventListener('click', function () {
@@ -24,14 +40,43 @@
         }
     });
 
+    // Dropdown-Buttons: togglen ihr eigenes Untermenü, schließen die anderen.
+    subToggles.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            var open = btn.getAttribute('aria-expanded') === 'true';
+            closeSubmenus(btn);
+            btn.setAttribute('aria-expanded', String(!open));
+        });
+    });
+
+    // Klick außerhalb eines Dropdowns schließt offene Untermenüs.
+    document.addEventListener('click', function (event) {
+        if (!event.target.closest('.site-nav__item--has-submenu')) {
+            closeSubmenus(null);
+        }
+    });
+
     document.addEventListener('keydown', function (event) {
-        if (event.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        // Zuerst ein offenes Untermenü schließen (Fokus zurück auf seinen Button) …
+        var openSub = subToggles.filter(function (btn) {
+            return btn.getAttribute('aria-expanded') === 'true';
+        })[0];
+        if (openSub) {
+            openSub.setAttribute('aria-expanded', 'false');
+            openSub.focus();
+            return;
+        }
+        // … sonst das Burger-Overlay.
+        if (toggle.getAttribute('aria-expanded') === 'true') {
             setOpen(false);
             toggle.focus();
         }
     });
 
-    // Beim Vergrößern auf Desktop offenes Overlay zurücksetzen.
+    // Beim Vergrößern auf Desktop offenes Overlay/Untermenüs zurücksetzen.
     window.addEventListener('resize', function () {
         if (window.innerWidth > 1249 && toggle.getAttribute('aria-expanded') === 'true') {
             setOpen(false);