Files
tsv08kulmbach-website/app/components/nav.php
fs c5f7b258ff 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
2026-06-19 08:13:10 +02:00

55 lines
2.4 KiB
PHP

<?php
declare(strict_types=1);
/**
* Hauptnavigation aus data/navigation.json. Props: $current (Slug).
* 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');
$href = static function (string $slug): string {
// Anker-Slugs ("#aktuelles") zeigen auf Startseiten-Sektionen.
return str_starts_with($slug, '#') ? url() . $slug : url($slug);
};
?>
<nav class="site-nav" aria-label="Hauptnavigation">
<button class="site-nav__toggle" type="button" aria-expanded="false" aria-controls="site-nav-list">
<span class="site-nav__toggle-bar" aria-hidden="true"></span>
<span class="visually-hidden">Menü öffnen</span>
</button>
<ul class="site-nav__list" id="site-nav-list">
<?php foreach ($nav['main'] as $item): ?>
<?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 endif; ?>
<?php endforeach; ?>
</ul>
</nav>