fix(htmx): implement persistent shell pattern by targeting #main-content

2026-02-19 21:20:23 +01:00
parent 755a0e5057
commit 5acced48ad
1 changed files with 18 additions and 14 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -10,6 +10,11 @@
            });
            document.documentElement.setAttribute('data-theme', this.theme);
            document.documentElement.classList.remove('hidden');
+
+            // Close mobile menu on navigation
+            document.addEventListener('htmx:beforeRequest', () => {
+                this.mobileMenuOpen = false;
+            });
        }
    }"
    :data-theme="theme"
@@ -28,24 +33,23 @@

    {{ghost_head}}
 </head>
-<body class="{{body_class}} font-sans antialiased">
-    
-    {{!-- The Mobile Menu is outside the HTMX swap container to keep state alive --}}
+<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 --}}
    {{> mobile-menu}}

-    {{!-- 
-        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 class="flex-grow">
+    <main id="main-content" class="flex-grow">
        {{{body}}}
    </main>

    {{> footer}}
-    </div>

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