fix(navigation): implement persistent shell with client-side highlighting for rock-solid mobile menu

2026-02-20 11:25:13 +01:00
parent d7702d6697
commit 5db7ad8e6b
2 changed files with 25 additions and 16 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -3,6 +3,7 @@
    x-data="{ 
        theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'),
        mobileMenuOpen: false,
+        currentPath: window.location.pathname,
        init() {
            $watch('theme', val => {
                localStorage.setItem('theme', val);
@@ -10,10 +11,15 @@
            });
            document.documentElement.setAttribute('data-theme', this.theme);
            document.documentElement.classList.remove('hidden');
+
+            // Update currentPath on navigation to keep menu highlights in sync
+            document.addEventListener('htmx:afterSettle', () => {
+                this.currentPath = window.location.pathname;
+                this.mobileMenuOpen = false;
+            });
        }
    }"
    :data-theme="theme"
-    @htmx:before-request.window="mobileMenuOpen = false"
    class="hidden">
 <head>
    <meta charset="utf-8">
@@ -30,26 +36,25 @@
    {{ghost_head}}
 </head>
 <body 
-    class="{{body_class}} font-sans antialiased"
+    class="{{body_class}} font-sans antialiased min-h-screen flex flex-col"
    hx-boost="true"
-    hx-target="#viewport"
-    hx-select="#viewport"
+    hx-target="#main-content"
+    hx-select="#main-content"
+    hx-swap="innerHTML show:top"
 >
-    
    {{!-- 
-        This container is the target for HTMX swaps. 
-        Moving everything inside ensures navigation highlights and states update on every click.
+        PERSISTENT SHELL:
+        These elements are OUTSIDE #main-content, so they never swap.
+        This keeps Alpine state (mobileMenuOpen) perfectly stable.
    --}}
-    <div id="viewport" class="min-h-screen flex flex-col">
-        {{> mobile-menu}}
-        {{> header}}
+    {{> mobile-menu}}
+    {{> header}}

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

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

    {{ghost_foot}}
    <script src="{{asset "js/ghost-config.js"}}"></script>
--- a/partials/navigation.hbs
+++ b/partials/navigation.hbs
@@ -1,6 +1,10 @@
 <ul class="nav">
    {{#foreach navigation}}
-    <li class="{{link_class for=url class=(concat "nav-" slug)}}">
+    {{!-- 
+        We use Alpine to dynamically apply the nav-current class based on currentPath.
+        This works even when the navigation itself is not swapped by HTMX.
+    --}}
+    <li class="nav-{{slug}}" :class="currentPath === '{{url}}' ? 'nav-current' : ''">
        <a href="{{url absolute="true"}}" class="nav-link">
            {{label}}
        </a>