fix(mobile-menu): ensure menu is closed after HTMX settlement
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
This commit is contained in:
@@ -33,7 +33,6 @@
|
|||||||
this.open = false;
|
this.open = false;
|
||||||
},
|
},
|
||||||
openMenu() {
|
openMenu() {
|
||||||
// Only open if we are on a mobile screen to prevent unexpected triggers
|
|
||||||
if (window.innerWidth < 768) {
|
if (window.innerWidth < 768) {
|
||||||
this.open = true;
|
this.open = true;
|
||||||
}
|
}
|
||||||
@@ -41,15 +40,19 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Ensure menu is closed during and after navigation
|
||||||
document.addEventListener('htmx:beforeRequest', () => {
|
document.addEventListener('htmx:beforeRequest', () => {
|
||||||
if (window.Alpine) Alpine.store('mobileMenu').close();
|
if (window.Alpine) Alpine.store('mobileMenu').close();
|
||||||
});
|
});
|
||||||
|
document.addEventListener('htmx:afterSettle', () => {
|
||||||
|
if (window.Alpine) Alpine.store('mobileMenu').close();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{{ghost_head}}
|
{{ghost_head}}
|
||||||
</head>
|
</head>
|
||||||
<body class="{{body_class}} font-sans antialiased">
|
<body class="{{body_class}} font-sans antialiased">
|
||||||
{{!-- Mobile menu stays outside the boosted area to persist state --}}
|
{{!-- Mobile menu stays outside the boosted area --}}
|
||||||
{{> mobile-menu}}
|
{{> mobile-menu}}
|
||||||
|
|
||||||
<div class="min-h-screen flex flex-col" hx-boost="true">
|
<div class="min-h-screen flex flex-col" hx-boost="true">
|
||||||
|
|||||||
Reference in New Issue
Block a user