From 1c9ccfb794f257d3df646e27342d692100a54a5c Mon Sep 17 00:00:00 2001 From: Emirhan3 Date: Thu, 24 Sep 2026 16:04:03 +0000 Subject: [PATCH] feat: Navigationsleiste --- src/components/navigationsbar/navigation.html | 116 +++++++++ src/components/navigationsbar/navigation.js | 51 ++++ src/styles/navigation.css | 223 ++++++++++++++++++ 3 files changed, 390 insertions(+) create mode 100644 src/components/navigationsbar/navigation.html create mode 100644 src/components/navigationsbar/navigation.js create mode 100644 src/styles/navigation.css diff --git a/src/components/navigationsbar/navigation.html b/src/components/navigationsbar/navigation.html new file mode 100644 index 0000000..7fa68c1 --- /dev/null +++ b/src/components/navigationsbar/navigation.html @@ -0,0 +1,116 @@ + + + + + + + TriHub Navigation + + + + + +
+ + + + + +
+ +
+

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 new file mode 100644 index 0000000..eaf7d71 --- /dev/null +++ b/src/components/navigationsbar/navigation.js @@ -0,0 +1,51 @@ +(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"); + + if (!toggle || !nav || !dropdownToggle || !dropdown) return; + + // Mobiles Menü öffnen/schließen + toggle.addEventListener("click", function () { + var isOpen = nav.classList.toggle("is-open"); + toggle.setAttribute("aria-expanded", String(isOpen)); + toggle.setAttribute( + "aria-label", + isOpen ? "Menü schließen" : "Menü öffnen", + ); + }); + + // Dropdown "Triathlon Spektrum" per Klick öffnen/schließen + dropdownToggle.addEventListener("click", function () { + var isOpen = dropdown.classList.toggle("is-open"); + dropdownToggle.setAttribute("aria-expanded", String(isOpen)); + }); + + // Escape schließt Dropdown/Menü, Fokus geht zurück auf den Auslöser + document.addEventListener("keydown", function (e) { + if (e.key !== "Escape") return; + + if (dropdown.classList.contains("is-open")) { + dropdown.classList.remove("is-open"); + dropdownToggle.setAttribute("aria-expanded", "false"); + dropdownToggle.focus(); + } + if (nav.classList.contains("is-open")) { + nav.classList.remove("is-open"); + toggle.setAttribute("aria-expanded", "false"); + toggle.focus(); + } + }); + + // Klick außerhalb schließt das Dropdown + document.addEventListener("click", function (e) { + if ( + !dropdown.contains(e.target) && + !dropdownToggle.contains(e.target) + ) { + dropdown.classList.remove("is-open"); + dropdownToggle.setAttribute("aria-expanded", "false"); + } + }); +})(); diff --git a/src/styles/navigation.css b/src/styles/navigation.css new file mode 100644 index 0000000..e249cf0 --- /dev/null +++ b/src/styles/navigation.css @@ -0,0 +1,223 @@ +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap"); + +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding-top: 72px; /* Platz für die fixierte Navbar */ + background-color: #0d0d1a; + font-family: "Inter", system-ui, sans-serif; +} + +/* ---------- Kriterium 1: durchgehend fixiert am oberen Bildschirmrand ---------- */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + display: flex; + align-items: center; + justify-content: space-between; + height: 72px; + padding: 0 2rem; + background-color: #0d0d1a; + border-bottom: 1px solid #1a1a2e; +} + +/* ---------- Logo ---------- */ +.navbar__logo { + display: flex; + flex-direction: column; + line-height: 1.2; + color: #fff; + text-decoration: none; +} + +.navbar__logo-title { + font-family: "Playfair Display", serif; + font-weight: 700; + font-size: 1.1rem; + letter-spacing: 0.05em; +} + +.navbar__logo-tagline { + font-size: 0.7rem; + color: #94a3b8; +} + +/* ---------- Menü ---------- */ +.navbar__menu { + display: flex; + align-items: center; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; +} + +.navbar__link { + display: flex; + align-items: center; + gap: 0.35rem; + background: none; + border: none; + color: #f8fafc; + text-decoration: none; + font-size: 0.95rem; + font-family: inherit; + cursor: pointer; + padding: 0.5rem 0.25rem; +} + +.navbar__link:hover { + color: #10b981; +} + +.navbar__link--login { + padding: 0.5rem 1.25rem; + border: 1px solid #10b981; + border-radius: 999px; + color: #10b981; +} + +.navbar__link--login:hover { + background: #10b981; + color: #0d0d1a; +} + +/* ---------- Dropdown ---------- */ +.navbar__item--has-dropdown { + position: relative; +} + +.navbar__chevron { + width: 10px; + height: 6px; + transition: transform 0.15s ease; +} + +.navbar__dropdown-toggle[aria-expanded="true"] .navbar__chevron { + transform: rotate(180deg); +} + +.navbar__dropdown { + display: none; + position: absolute; + top: calc(100% + 0.5rem); + left: 0; + min-width: 180px; + background: #1a1a2e; + border: 1px solid #262640; + border-radius: 8px; + list-style: none; + margin: 0; + padding: 0.5rem; +} + +.navbar__dropdown.is-open { + display: block; +} + +.navbar__dropdown-link { + display: block; + padding: 0.5rem 0.75rem; + color: #f8fafc; + text-decoration: none; + font-size: 0.9rem; + border-radius: 4px; +} + +.navbar__dropdown-link:hover { + background: #0d0d1a; + color: #10b981; +} + +/* ---------- Kriterium 2: barrierefreie Tastatursteuerung ---------- */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: #10b981; + color: #0d0d1a; + font-weight: 600; + padding: 0.75rem 1rem; + z-index: 1100; + transition: top 0.2s ease; +} + +.skip-link:focus { + top: 0; +} + +.navbar a:focus-visible, +.navbar button:focus-visible { + outline: 3px solid #10b981; + outline-offset: 2px; + border-radius: 4px; +} + +/* ---------- Mobile Toggle ---------- */ +.navbar__toggle { + display: none; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; +} + +.navbar__toggle-icon, +.navbar__toggle-icon::before, +.navbar__toggle-icon::after { + display: block; + width: 24px; + height: 2px; + background: #fff; + position: relative; +} + +.navbar__toggle-icon::before, +.navbar__toggle-icon::after { + content: ""; + position: absolute; +} +.navbar__toggle-icon::before { + top: -8px; +} +.navbar__toggle-icon::after { + top: 8px; +} + +@media (max-width: 860px) { + .navbar__toggle { + display: block; + } + + .navbar__nav { + position: absolute; + top: 72px; + left: 0; + right: 0; + background: #0d0d1a; + border-bottom: 1px solid #1a1a2e; + display: none; + } + + .navbar__nav.is-open { + display: block; + } + + .navbar__menu { + flex-direction: column; + align-items: flex-start; + padding: 1rem 2rem; + gap: 1rem; + } + + .navbar__dropdown { + position: static; + margin-top: 0.5rem; + } +}