fix(mobile-menu): use persistent store and move x-cloak to base layer for stability

2026-02-19 21:03:41 +01:00
parent 265cee9b97
commit ce531399f9
4 changed files with 22 additions and 18 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -2,23 +2,13 @@
 <html lang="{{@site.lang}}" 
    x-data="{ 
        theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'),
-        mobileMenuOpen: false,
        init() {
            $watch('theme', val => {
                localStorage.setItem('theme', val);
                document.documentElement.setAttribute('data-theme', val);
            });
-            $watch('mobileMenuOpen', val => {
-                console.log('Mobile menu open state changed to:', val);
-            });
            document.documentElement.setAttribute('data-theme', this.theme);
            document.documentElement.classList.remove('hidden');
-
-            // Close mobile menu on HTMX navigation
-            document.addEventListener('htmx:beforeRequest', () => {
-                console.log('HTMX beforeRequest: closing menu');
-                this.mobileMenuOpen = false;
-            });
        }
    }"
    :data-theme="theme"
@@ -35,6 +25,20 @@
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/htmx.org@2.0.0"></script>

+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.store('mobileMenu', {
+                open: false,
+                close() { this.open = false; },
+                openMenu() { this.open = true; }
+            });
+        });
+
+        document.addEventListener('htmx:beforeRequest', () => {
+            if (window.Alpine) Alpine.store('mobileMenu').close();
+        });
+    </script>
+
    {{ghost_head}}
 </head>
 <body class="{{body_class}} font-sans antialiased">