diff --git a/src/components/navigationsbar/images/logo.png b/src/components/navigationsbar/images/logo.png new file mode 100644 index 0000000..3063d26 Binary files /dev/null and b/src/components/navigationsbar/images/logo.png differ diff --git a/src/components/navigationsbar/navigation.html b/src/components/navigationsbar/navigation.html index 7fa68c1..e773de8 100644 --- a/src/components/navigationsbar/navigation.html +++ b/src/components/navigationsbar/navigation.html @@ -1,116 +1,56 @@ - - - - - - - TriHub Navigation - - - - + -
-
+ + + TRI-HUB + Triathlon als sportliches Zuhause ab 50 - + + - - - -
- -
-

Vorschau der Navigation

-

Dieser Bereich dient nur zum Testen der Navbar.

-
+ + - - - + + + diff --git a/src/components/navigationsbar/navigation.js b/src/components/navigationsbar/navigation.js index eaf7d71..b70d427 100644 --- a/src/components/navigationsbar/navigation.js +++ b/src/components/navigationsbar/navigation.js @@ -1,51 +1,111 @@ -(function () { - var toggle = document.querySelector(".navbar__toggle"); - var nav = document.querySelector(".navbar__nav"); - var dropdownToggle = document.querySelector(".navbar__dropdown-toggle"); - var dropdown = document.querySelector("#dropdown-spektrum"); +/** + * Lädt das Navbar-Fragment (navigation.html) per fetch() und ersetzt + * damit den Platzhalter im Header der jeweiligen Seite. + */ +export function initNavbar(placeholderSelector = "#navbar-placeholder") { + const placeholder = document.querySelector(placeholderSelector); + if (!placeholder) { + console.warn("Navbar-Platzhalter nicht gefunden:", placeholderSelector); + return; + } - if (!toggle || !nav || !dropdownToggle || !dropdown) return; + fetch(new URL("./navigation.html", import.meta.url)) + .then((res) => res.text()) + .then((html) => { + placeholder.outerHTML = html; // Platzhalter durch echtes Navbar-Markup ersetzen + setupBehavior(); + markCurrentPage(); + }) + .catch((err) => + console.error("Navbar konnte nicht geladen werden:", err), + ); +} - // Mobiles Menü öffnen/schließen - toggle.addEventListener("click", function () { - var isOpen = nav.classList.toggle("is-open"); +/** + * Richtet alle interaktiven Funktionen der Navbar ein: + * - Mobiles Menü öffnen/schließen per Klick + * - Automatischer Fokus auf ersten Link, wenn per Tastatur geöffnet + * - Escape schließt das Menü und gibt den Fokus zurück + * - Menü schließt sich, wenn der Fokus die Navbar per Tab verlässt + * - Klick außerhalb der Navbar schließt das Menü (Maus/Touch) + */ +export function setupBehavior() { + const navbar = document.querySelector(".navbar"); + const toggle = document.querySelector(".navbar__toggle"); + const nav = document.querySelector(".navbar__nav"); + const menu = document.querySelector(".navbar__menu"); + if (!navbar || !toggle || !nav || !menu) return; + + let openedViaKeyboard = false; + + // Merken, ob der Toggle-Button per Tastatur (statt Maus) ausgelöst wurde + toggle.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + openedViaKeyboard = true; + } + }); + + // Menü auf-/zuklappen; funktioniert nativ per Klick UND per Enter/Space, + // da .navbar__toggle ein echtes