From a7f1c83e83a630081015210c11d2602f45f1fe95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Fri, 20 Feb 2026 10:21:26 +0100 Subject: [PATCH] fix(navigation): ensure active state and hover effect work correctly with HTMX by moving header inside viewport --- assets/css/tailwind.css | 19 +++++++++++++++++++ default.hbs | 26 ++++++++++++++------------ partials/navigation.hbs | 4 +--- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index c44bbf2..c5c1dbc 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -99,6 +99,25 @@ @apply flex flex-col items-center space-y-10 text-4xl; } + /* Navigation Links */ + .nav-link { + @apply relative py-2 px-1 transition-all duration-300 opacity-80 hover:opacity-100 hover:text-[var(--brand-primary)]; + } + + .nav-link::after { + content: ""; + @apply absolute bottom-0 left-0 w-full h-0.5 bg-[var(--brand-primary)] transform scale-x-0 transition-transform duration-300 ease-out origin-left; + } + + .nav-link:hover::after, + .nav-current .nav-link::after { + @apply scale-x-100; + } + + .nav-current .nav-link { + @apply text-[var(--brand-primary)] opacity-100 font-semibold; + } + /* Button & Link Components */ .btn-primary { @apply inline-flex items-center px-8 py-3 border border-transparent text-base font-semibold rounded-lg shadow-md diff --git a/default.hbs b/default.hbs index 0f73674..61d73fe 100644 --- a/default.hbs +++ b/default.hbs @@ -34,22 +34,24 @@ {{ghost_head}} - {{!-- Mobile menu is outside the swap target and stays alive --}} + class="{{body_class}} font-sans antialiased"> + + {{!-- The Mobile Menu is outside the swap target and stays alive --}} {{> mobile-menu}} - {{> header}} + {{!-- + We target only this container for HTMX page swaps. + This keeps root Alpine state (like mobileMenuOpen) persistent. + --}} +
+ {{> header}} -
- {{{body}}} -
+
+ {{{body}}} +
- {{> footer}} + {{> footer}} +
{{ghost_foot}} diff --git a/partials/navigation.hbs b/partials/navigation.hbs index 5e6d78c..32fb6f1 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,10 +1,8 @@