fix(mobile-menu): move store to head and use explicit state transitions to prevent re-opening

assets/js/main.js

@@ -1,32 +1,9 @@
 // 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)');
@@ -41,13 +18,15 @@ document.addEventListener('DOMContentLoaded', () => {
     animateGridItems();
 
     // Re-run animation and other setup when HTMX settles new content
-    document.body.addEventListener('htmx:afterSettle', (event) => {
+    // Use document instead of document.body to persist across boosted navigation
+    document.addEventListener('htmx:afterSettle', (event) => {
         // If the settled element is the posts-container or contains grid items
-        if (event.detail.target.id === 'posts-container' || event.detail.target.querySelector('.post-grid-item')) {
-            animateGridItems(event.detail.target);
+        const target = event.detail.target;
+        if (target.id === 'posts-container' || target.querySelector('.post-grid-item')) {
+            animateGridItems(target);
         }
 
-        // If it was a full page boost, we might need to reset some things
+        // Handle global boost re-animation
         if (event.detail.boosted) {
              animateGridItems();
         }