fix(navigation): ensure active state and hover effect work correctly with HTMX by moving header inside viewport

2026-02-20 10:21:26 +01:00
parent ad8b7777f2
commit a7f1c83e83
3 changed files with 34 additions and 15 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -34,22 +34,24 @@
    {{ghost_head}}
 </head>
 <body 
-    class="{{body_class}} font-sans antialiased min-h-screen flex flex-col"
-    hx-boost="true"
-    hx-target="#main-content"
-    hx-select="#main-content"
-    hx-swap="innerHTML show:top"
->
-    {{!-- 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.
+    --}}
+    <div id="viewport" class="min-h-screen flex flex-col" hx-boost="true" hx-target="#viewport" hx-select="#viewport">
+        {{> header}}

-    <main id="main-content" class="flex-grow">
-        {{{body}}}
-    </main>
+        <main class="flex-grow">
+            {{{body}}}
+        </main>

-    {{> footer}}
+        {{> footer}}
+    </div>

    {{ghost_foot}}
    <script src="{{asset "js/ghost-config.js"}}"></script>