diff --git a/default.hbs b/default.hbs index db8ea78..5f28b11 100644 --- a/default.hbs +++ b/default.hbs @@ -3,6 +3,7 @@ x-data="{ theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'), mobileMenuOpen: false, + currentPath: window.location.pathname, init() { $watch('theme', val => { localStorage.setItem('theme', val); @@ -10,10 +11,15 @@ }); document.documentElement.setAttribute('data-theme', this.theme); document.documentElement.classList.remove('hidden'); + + // Update currentPath on navigation to keep menu highlights in sync + document.addEventListener('htmx:afterSettle', () => { + this.currentPath = window.location.pathname; + this.mobileMenuOpen = false; + }); } }" :data-theme="theme" - @htmx:before-request.window="mobileMenuOpen = false" class="hidden"> @@ -30,26 +36,25 @@ {{ghost_head}} - {{!-- - This container is the target for HTMX swaps. - Moving everything inside ensures navigation highlights and states update on every click. + PERSISTENT SHELL: + These elements are OUTSIDE #main-content, so they never swap. + This keeps Alpine state (mobileMenuOpen) perfectly stable. --}} -
- {{> mobile-menu}} - {{> header}} + {{> mobile-menu}} + {{> header}} -
- {{{body}}} -
+
+ {{{body}}} +
- {{> footer}} -
+ {{> footer}} {{ghost_foot}} diff --git a/partials/navigation.hbs b/partials/navigation.hbs index 32fb6f1..f5f3bff 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,6 +1,10 @@