valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile-menu): implement persistent viewport pattern and hx-preserve for mobile menu
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 21:19:34 +01:00
parent b00f0559f0
commit 755a0e5057
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
default.hbs
View File

@@ -10,13 +10,6 @@
}); });
document.documentElement.setAttribute('data-theme', this.theme); document.documentElement.setAttribute('data-theme', this.theme);
document.documentElement.classList.remove('hidden'); document.documentElement.classList.remove('hidden');
document.addEventListener('htmx:beforeRequest', () => {
this.mobileMenuOpen = false;
});
},
toggleMenu() {
this.mobileMenuOpen = !this.mobileMenuOpen;
} }
}" }"
:data-theme="theme" :data-theme="theme"
@@ -36,10 +29,15 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}} font-sans antialiased"> <body class="{{body_class}} font-sans antialiased">
{{!-- Mobile menu outside boosted area --}}
{{!-- The Mobile Menu is outside the HTMX swap container to keep state alive --}}
{{> mobile-menu}} {{> mobile-menu}}
<div class="min-h-screen flex flex-col" hx-boost="true"> {{!--
We target only this container for HTMX page swaps.
This keeps root Alpine state (like mobileMenuOpen) persistent.
--}}
<div id="viewport" class="min-h-screen flex flex-col" hx-boost="true" hx-target="#viewport" hx-select="#viewport">
{{> header}} {{> header}}
<main class="flex-grow"> <main class="flex-grow">

1
partials/mobile-menu.hbs
View File

@@ -1,4 +1,5 @@
<div id="mobile-menu" <div id="mobile-menu"
hx-preserve
x-show="mobileMenuOpen" x-show="mobileMenuOpen"
x-transition:enter="transition ease-out duration-300" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="-translate-x-full" x-transition:enter-start="-translate-x-full"