diff --git a/assets/js/main.js b/assets/js/main.js
index b7b0c02..3497c56 100644
--- 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.
});
diff --git a/default.hbs b/default.hbs
index 8ff12ce..1f6917a 100644
--- 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">
@@ -24,20 +24,6 @@
-
-
{{ghost_head}}