fix(mobile-menu): move state to root x-data and add .stop to all logo links

2026-02-19 21:13:24 +01:00
parent ce531399f9
commit b00f0559f0
3 changed files with 15 additions and 21 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,13 @@
            });
            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"
@@ -25,24 +33,10 @@
    <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">
-    {{!-- Mobile menu stays outside the boosted area --}}
+    {{!-- Mobile menu outside boosted area --}}
    {{> mobile-menu}}

    <div class="min-h-screen flex flex-col" hx-boost="true">