fix(mobile-menu): implement ultra-robust closing logic with global listeners

2026-02-19 19:59:46 +01:00
parent 883dc2122d
commit c398905f9b
2 changed files with 24 additions and 18 deletions
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,9 +1,32 @@
 // Main JavaScript file for Palina theme
 // Using HTMX and Alpine.js for enhanced functionality

+// Initialize Alpine Store for mobile menu
+document.addEventListener('alpine:init', () => {
+    Alpine.store('mobileMenu', {
+        open: false,
+        toggle() {
+            this.open = !this.open;
+        },
+        close() {
+            this.open = false;
+        }
+    });
+});
+
 document.addEventListener('DOMContentLoaded', () => {
    console.log('Palina theme loaded!');

+    // Close mobile menu on any link click inside it
+    document.addEventListener('click', (e) => {
+        const mobileMenuLink = e.target.closest('#mobile-menu a');
+        if (mobileMenuLink) {
+            if (window.Alpine) {
+                Alpine.store('mobileMenu').close();
+            }
+        }
+    });
+
    // Staggered fade-in animation for post grid
    const animateGridItems = (container = document) => {
        const gridItems = container.querySelectorAll('.post-grid-item:not(.animated)');
@@ -29,7 +52,4 @@ document.addEventListener('DOMContentLoaded', () => {
             animateGridItems();
        }
    });
-
-    // Handle Lightbox for post images specifically (if needed beyond the global Alpine listener)
-    // The global listener in default.hbs should handle most cases.
 });
--- a/default.hbs
+++ b/default.hbs
@@ -12,7 +12,7 @@
        }
    }"
    :data-theme="theme"
-    @htmx:after-on-load.window="Alpine.store('mobileMenu').open = false"
+    @htmx:before-request.window="$store.mobileMenu.close()"
    class="hidden">
 <head>
    <meta charset="utf-8">
@@ -24,20 +24,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,
-                toggle() {
-                    this.open = !this.open;
-                },
-                close() {
-                    this.open = false;
-                }
-            })
-        })
-    </script>
-
    {{ghost_head}}
 </head>
 <body class="{{body_class}} font-sans antialiased" hx-boost="true">