fix(mobile-menu): transition to global Alpine store for reliable state management

2026-02-19 19:56:49 +01:00
parent 38de9b916a
commit 883dc2122d
3 changed files with 21 additions and 8 deletions
--- a/default.hbs
+++ b/default.hbs
@@ -2,7 +2,6 @@
 <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);
@@ -13,7 +12,7 @@
        }
    }"
    :data-theme="theme"
-    @htmx:after-on-load.window="mobileMenuOpen = false"
+    @htmx:after-on-load.window="Alpine.store('mobileMenu').open = false"
    class="hidden">
 <head>
    <meta charset="utf-8">
@@ -25,6 +24,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,
+                toggle() {
+                    this.open = !this.open;
+                },
+                close() {
+                    this.open = false;
+                }
+            })
+        })
+    </script>
+
    {{ghost_head}}
 </head>
 <body class="{{body_class}} font-sans antialiased" hx-boost="true">