fix(mobile-menu): implement persistent viewport pattern and hx-preserve for mobile menu

2026-02-19 21:19:34 +01:00
parent b00f0559f0
commit 755a0e5057
2 changed files with 8 additions and 9 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -10,13 +10,6 @@
            });
            document.documentElement.setAttribute('data-theme', this.theme);
            document.documentElement.classList.remove('hidden');
-
-            document.addEventListener('htmx:beforeRequest', () => {
-                this.mobileMenuOpen = false;
-            });
-        },
-        toggleMenu() {
-            this.mobileMenuOpen = !this.mobileMenuOpen;
        }
    }"
    :data-theme="theme"
@@ -36,10 +29,15 @@
    {{ghost_head}}
 </head>
 <body class="{{body_class}} font-sans antialiased">
-    {{!-- Mobile menu outside boosted area --}}
+    
+    {{!-- The Mobile Menu is outside the HTMX swap container to keep state alive --}}
    {{> mobile-menu}}

-    <div class="min-h-screen flex flex-col" hx-boost="true">
+    {{!-- 
+        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">
--- a/partials/mobile-menu.hbs
+++ b/partials/mobile-menu.hbs
@@ -1,4 +1,5 @@
 <div id="mobile-menu" 
+    hx-preserve
    x-show="mobileMenuOpen"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="-translate-x-full"