melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore mobile drawer

Browse Source
This commit is contained in:
mkelvers
2026-05-24 02:09:10 +02:00
parent 07a6b6e4aa
commit 905e00ef6a
1 changed files with 78 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
templates/base.gohtml
View File

@@ -14,14 +14,31 @@
<link rel="stylesheet" href="/dist/tailwind.css">
<style>
/* Prevent transition on load */
.sidebar-collapsed #mobile-menu {
@media (min-width: 1024px) {
#mobile-menu {
width: 5rem !important; /* lg:w-20 */
}
.sidebar-collapsed .nav-label-container {
.nav-label-container {
grid-template-columns: 0fr !important;
opacity: 0 !important;
margin-left: 0 !important;
}
}
@media (max-width: 1023px) {
#mobile-menu {
transform: translateX(-100%);
}
#mobile-menu[data-mobile-open='true'] {
transform: translateX(0);
}
#mobile-menu-backdrop[data-mobile-open='true'] {
display: block;
}
}
/* Re-enable transitions after initialization */
.sidebar-ready #mobile-menu,
@@ -71,13 +88,44 @@
});
</script>
<script>
// initialize sidebar state immediately to prevent layout shift/transitions
(function() {
// keep the sidebar collapsed on desktop (lg+)
if (window.innerWidth >= 1024) {
document.documentElement.classList.add('sidebar-collapsed');
document.addEventListener('DOMContentLoaded', function() {
const menu = document.getElementById('mobile-menu');
const backdrop = document.getElementById('mobile-menu-backdrop');
const toggle = document.querySelector('[data-mobile-menu-toggle]');
if (!menu || !backdrop || !toggle) return;
const openMenu = function() {
menu.dataset.mobileOpen = 'true';
backdrop.dataset.mobileOpen = 'true';
backdrop.classList.remove('hidden');
toggle.setAttribute('aria-expanded', 'true');
};
const closeMenu = function() {
menu.dataset.mobileOpen = 'false';
backdrop.dataset.mobileOpen = 'false';
backdrop.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
};
toggle.addEventListener('click', function() {
if (menu.dataset.mobileOpen === 'true') {
closeMenu();
return;
}
})();
openMenu();
});
backdrop.addEventListener('click', closeMenu);
menu.querySelectorAll('a, button').forEach(function(el) {
el.addEventListener('click', function() {
if (window.innerWidth < 1024) closeMenu();
});
});
});
// Initialize sidebar state on load
document.addEventListener('DOMContentLoaded', () => {
@@ -242,18 +290,31 @@ if (window.showToast) showToast({ message: 'Something went wrong' })
}
</script>
</head>
<body class="bg-background text-foreground">
<body class="bg-background text-foreground">
<div class="flex min-h-screen flex-col">
{{if .User}}
<div class="flex flex-1 overflow-hidden">
<header class="fixed inset-x-0 top-0 z-50 flex h-14 items-center border-b border-border bg-background-sidebar px-4 lg:hidden">
<button type="button" data-unstyled-button data-mobile-menu-toggle class="inline-flex items-center justify-center bg-background-button p-2 text-foreground" aria-label="Open menu" aria-controls="mobile-menu" aria-expanded="false">
<svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M4 6h16"></path>
<path d="M4 12h16"></path>
<path d="M4 18h16"></path>
</svg>
</button>
<div class="ml-3 min-w-0 flex-1 truncate text-sm font-medium text-foreground">MyAnimeList</div>
</header>
<div class="flex flex-1 overflow-hidden pt-14 lg:pt-0">
<!-- Sidebar -->
<div id="mobile-menu" class="shrink-0 overflow-hidden w-64">
<div id="mobile-menu-backdrop" data-mobile-menu-backdrop class="fixed inset-0 z-40 hidden bg-black/50 lg:hidden"></div>
<div id="mobile-menu" data-mobile-open="false" class="fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-hidden bg-background-sidebar transition-transform duration-300 lg:static lg:translate-x-0 lg:transition-none">
{{block "sidebar" .}}
{{template "navigation" dict "CurrentPath" .CurrentPath}}
{{end}}
</div>
<main class="w-full flex-1 flex flex-col h-screen overflow-y-auto">
<main class="w-full flex-1 flex flex-col h-[calc(100dvh-3.5rem)] overflow-y-auto lg:h-screen">
<div class="flex-1 p-4 md:p-8">
{{template "content" .}}
</div>