diff --git a/app/components/header.php b/app/components/header.php index 2ce4dc7..9805195 100644 --- a/app/components/header.php +++ b/app/components/header.php @@ -6,6 +6,7 @@ declare(strict_types=1); * Seitenkopf mit Logo und Navigation. Props: $current (Slug). */ $club = json_load('club'); +$nav = json_load('navigation'); ?> diff --git a/app/components/nav.php b/app/components/nav.php index d7fc461..179ad3f 100644 --- a/app/components/nav.php +++ b/app/components/nav.php @@ -24,10 +24,10 @@ $href = static function (string $slug): string { > - -
  • - + +
  • - + diff --git a/data/navigation.json b/data/navigation.json index 2e458cf..175acfa 100644 --- a/data/navigation.json +++ b/data/navigation.json @@ -6,10 +6,12 @@ { "label": "Fußball", "slug": "fussball" }, { "label": "Turnen", "slug": "turnen" }, { "label": "Der Verein", "slug": "der-verein" }, - { "label": "Matchcenter", "slug": "matchcenter" }, - { "label": "Kontakt", "slug": "kontakt" } + { "label": "Matchcenter", "slug": "matchcenter" } + ], + "ctas": [ + { "label": "Kontakt", "slug": "kontakt", "style": "outline" }, + { "label": "Mitglied werden", "slug": "mitglied-werden", "style": "primary" } ], - "cta": { "label": "Mitglied werden", "slug": "mitglied-werden" }, "legal": [ { "label": "Impressum", "slug": "impressum" }, { "label": "Datenschutz", "slug": "datenschutz" } diff --git a/public/assets/css/layout.css b/public/assets/css/layout.css index a2a3a98..1986175 100644 --- a/public/assets/css/layout.css +++ b/public/assets/css/layout.css @@ -26,18 +26,19 @@ z-index: 10; } +/* Desktop: Logo links | Nav exakt zentriert | CTAs rechts */ .site-header__inner { - display: flex; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; - justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); } .site-header__brand { + justify-self: start; display: flex; align-items: center; - gap: 0.75rem; text-decoration: none; color: var(--clr-text); } @@ -48,7 +49,18 @@ filter: drop-shadow(var(--shadow)); } +.site-header__actions { + justify-self: end; + display: flex; + align-items: center; + gap: 0.75rem; +} + /* --- Navigation --- */ +.site-nav { + justify-self: center; +} + .site-nav__toggle { display: none; } @@ -75,6 +87,24 @@ } @media (max-width: 1249px) { + /* Mobile: Logo links, CTAs + Burger rechts */ + .site-header__inner { + display: flex; + justify-content: space-between; + } + + .site-header__actions { + order: 2; + margin-left: auto; + /* CTAs bleiben über dem Menü-Overlay sichtbar */ + position: relative; + z-index: 30; + } + + .site-nav { + order: 3; + } + .site-nav__toggle { display: grid; place-items: center; @@ -158,6 +188,33 @@ } } +/* CTAs im Overlay-Menü: nur auf schmalen Screens (dort fehlen sie im Header) */ +.site-nav__cta { + display: none; +} + +@media (max-width: 600px) { + /* Schmale Screens: nur der primäre (letzte) CTA neben dem Burger */ + .site-header__actions a:not(:last-child) { + display: none; + } + + .site-header__actions .btn { + font-size: var(--fs-400); + padding: 8px 14px; + } + + /* Im offenen Menü übernehmen die Overlay-CTAs */ + .site-nav__cta { + display: block; + margin-top: 1rem; + } + + body.nav-open .site-header__actions { + visibility: hidden; + } +} + /* --- Footer --- */ .site-footer { margin-top: var(--space-section); diff --git a/public/assets/css/utilities.css b/public/assets/css/utilities.css index 98b2ad0..a05ff8d 100644 --- a/public/assets/css/utilities.css +++ b/public/assets/css/utilities.css @@ -4,6 +4,7 @@ .btn { display: inline-block; padding: 10px 18px; + white-space: nowrap; background: var(--clr-accent); color: var(--clr-text); font-size: var(--fs-500);