fix(mobile-menu): move state to root component and refine event isolation

2026-02-19 20:42:22 +01:00
parent f7b43da97b
commit 5203e616d0
3 changed files with 12 additions and 30 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -2,6 +2,7 @@
 <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);
@@ -9,6 +10,11 @@
            });
            document.documentElement.setAttribute('data-theme', this.theme);
            document.documentElement.classList.remove('hidden');
+
+            // Close mobile menu on HTMX navigation
+            document.addEventListener('htmx:beforeRequest', () => {
+                this.mobileMenuOpen = false;
+            });
        }
    }"
    :data-theme="theme"
@@ -25,30 +31,6 @@
    <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() { 
-                    if (window.innerWidth < 768) {
-                        this.open = true; 
-                    }
-                }
-            });
-        });
-
-        // Ensure menu is closed during and after navigation
-        document.addEventListener('htmx:beforeRequest', () => {
-            if (window.Alpine) Alpine.store('mobileMenu').close();
-        });
-        document.addEventListener('htmx:afterSettle', () => {
-            if (window.Alpine) Alpine.store('mobileMenu').close();
-        });
-    </script>
-
    {{ghost_head}}
 </head>
 <body class="{{body_class}} font-sans antialiased">