fix(mobile-menu): isolate mobile menu from hx-boost to prevent state persistence issues

2026-02-19 20:06:25 +01:00
parent 2e224930b5
commit b1346cbe90
2 changed files with 11 additions and 4 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -39,9 +39,11 @@

    {{ghost_head}}
 </head>
-<body class="{{body_class}} font-sans antialiased" hx-boost="true">
+<body class="{{body_class}} font-sans antialiased">
+    {{!-- Mobile menu stays outside the boosted area to persist state --}}
+    {{> mobile-menu}}

-    <div class="min-h-screen flex flex-col">
+    <div class="min-h-screen flex flex-col" hx-boost="true">
        {{> header}}

        <main class="flex-grow">
@@ -49,8 +51,6 @@
        </main>

        {{> footer}}
-
-        {{> mobile-menu}}
    </div>

    {{ghost_foot}}
--- a/partials/mobile-menu.hbs
+++ b/partials/mobile-menu.hbs
@@ -1,7 +1,14 @@
 <div id="mobile-menu" 
    x-show="$store.mobileMenu.open"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="-translate-x-full"
+    x-transition:enter-end="translate-x-0"
+    x-transition:leave="transition ease-in duration-300"
+    x-transition:leave-start="translate-x-0"
+    x-transition:leave-end="-translate-x-full"
    class="fixed inset-0 z-50 bg-[var(--bg-primary)] flex flex-col md:hidden"
    @click.away="$store.mobileMenu.close()"
+    hx-boost="false"
    x-cloak>
    
    <!-- Mobile Menu Header -->