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

fix: prevent sidebar transition on page load

Browse Source
This commit is contained in:
mkelvers
2026-05-02 18:29:38 +02:00
committed by Mikkel Elvers
parent 7699b4b01b
commit 8bf7a9e369
2 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
templates/base.gohtml
View File

@@ -6,6 +6,25 @@
<title>{{template "title" .}} - MAL</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="stylesheet" href="/dist/tailwind.css">
<style>
/* Prevent transition on load */
.sidebar-collapsed #mobile-menu {
width: 5rem !important; /* lg:w-20 */
}
.sidebar-collapsed .nav-label-container {
grid-template-columns: 0fr !important;
opacity: 0 !important;
margin-left: 0 !important;
}
/* Re-enable transitions after initialization */
.sidebar-ready #mobile-menu,
.sidebar-ready .nav-label-container {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
</style>
<script type="module" src="/dist/static/theme.js" defer></script>
<script type="module" src="/dist/static/dropdown.js" defer></script>
<script type="module" src="/dist/static/discover.js" defer></script>
@@ -17,44 +36,33 @@
<script type="module" src="/dist/static/dedupe.js" defer></script>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script>
// Initialize sidebar state immediately to prevent layout shift/transitions
(function() {
const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
if (isCollapsed && window.innerWidth >= 1024) {
document.documentElement.classList.add('sidebar-collapsed');
}
})();
function toggleSidebar() {
const sidebar = document.getElementById('mobile-menu');
const isCollapsed = sidebar.classList.contains('lg:w-20');
const isCollapsed = document.documentElement.classList.contains('sidebar-collapsed');
if (isCollapsed) {
sidebar.classList.remove('lg:w-20');
sidebar.classList.add('lg:w-64');
document.documentElement.classList.remove('sidebar-collapsed');
localStorage.setItem('sidebar-collapsed', 'false');
} else {
sidebar.classList.remove('lg:w-64');
sidebar.classList.add('lg:w-20');
document.documentElement.classList.add('sidebar-collapsed');
localStorage.setItem('sidebar-collapsed', 'true');
}
// Update navigation items visibility
document.querySelectorAll('.nav-label-container').forEach(el => {
if (isCollapsed) {
el.classList.remove('lg:grid-cols-[0fr]', 'lg:opacity-0', 'lg:ml-0');
el.classList.add('lg:grid-cols-[1fr]', 'lg:opacity-100', 'lg:ml-4');
} else {
el.classList.remove('lg:grid-cols-[1fr]', 'lg:opacity-100', 'lg:ml-4');
el.classList.add('lg:grid-cols-[0fr]', 'lg:opacity-0', 'lg:ml-0');
}
});
}
// Initialize sidebar state on load
document.addEventListener('DOMContentLoaded', () => {
const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
if (isCollapsed && window.innerWidth >= 1024) {
const sidebar = document.getElementById('mobile-menu');
sidebar.classList.remove('lg:w-64');
sidebar.classList.add('lg:w-20');
document.querySelectorAll('.nav-label-container').forEach(el => {
el.classList.remove('lg:grid-cols-[1fr]', 'lg:opacity-100', 'lg:ml-4');
el.classList.add('lg:grid-cols-[0fr]', 'lg:opacity-0', 'lg:ml-0');
});
}
// Small delay to ensure styles are applied before enabling transitions
requestAnimationFrame(() => {
document.documentElement.classList.add('sidebar-ready');
});
});
function toggleMobileMenu() {
@@ -155,7 +163,7 @@
<button id="mobile-overlay" class="hidden fixed inset-0 z-40 w-full cursor-default border-none bg-black/60 backdrop-blur-sm outline-none lg:hidden" onclick="toggleMobileMenu()" aria-label="Close mobile menu"></button>
<!-- Sidebar -->
<div id="mobile-menu" class="fixed inset-y-0 left-0 z-50 shrink-0 overflow-hidden transform transition-all duration-300 lg:sticky lg:top-16 lg:z-auto lg:h-[calc(100vh-4rem)] -translate-x-full lg:shadow-none lg:w-64 lg:translate-x-0 w-64 shadow-2xl">
<div id="mobile-menu" class="fixed inset-y-0 left-0 z-50 shrink-0 overflow-hidden transform lg:sticky lg:top-16 lg:z-auto lg:h-[calc(100vh-4rem)] -translate-x-full lg:shadow-none lg:w-64 lg:translate-x-0 w-64 shadow-2xl">
{{block "sidebar" .}}
{{template "navigation" dict "CurrentPath" .CurrentPath}}
{{end}}