fix: prevent sidebar transition on page load

templates/base.gohtml

@@ -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');
+        document.documentElement.classList.remove('sidebar-collapsed');
-        sidebar.classList.add('lg:w-64');
         localStorage.setItem('sidebar-collapsed', 'false');
       } else {
-        sidebar.classList.remove('lg:w-64');
+        document.documentElement.classList.add('sidebar-collapsed');
-        sidebar.classList.add('lg:w-20');
         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';
+      // Small delay to ensure styles are applied before enabling transitions
-      if (isCollapsed && window.innerWidth >= 1024) {
+      requestAnimationFrame(() => {
-        const sidebar = document.getElementById('mobile-menu');
+        document.documentElement.classList.add('sidebar-ready');
-        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');
       });
-      }
     });
 
     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}}

templates/components/navigation.gohtml

@@ -20,7 +20,7 @@
         <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
         <polyline points="9 22 9 12 15 12 15 22" />
       </svg>
-      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
+      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Home</span>
         </div>
@@ -43,7 +43,7 @@
         <line x1="17" y1="17" x2="22" y2="17" />
         <line x1="17" y1="7" x2="22" y2="7" />
       </svg>
-      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
+      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Browse</span>
         </div>
@@ -60,7 +60,7 @@
         <circle cx="12" cy="12" r="10" />
         <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
       </svg>
-      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
+      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Discover</span>
         </div>
@@ -76,7 +76,7 @@
       <svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}" viewBox="0 0 24 24" fill="currentColor">
         <path d="M17 18.113l-3.256-2.326A2.989 2.989 0 0 0 12 15.228c-.629 0-1.232.194-1.744.559L7 18.113V4h10v14.113zM18 2H6a1 1 0 0 0-1 1v17.056c0 .209.065.412.187.581a.994.994 0 0 0 1.394.233l4.838-3.455a1 1 0 0 1 1.162 0l4.838 3.455A1 1 0 0 0 19 20.056V3a1 1 0 0 0-1-1z" />
       </svg>
-      <div class="nav-label-container grid transition-all duration-300 ease-in-out grid-cols-[1fr] opacity-100 ml-4">
+      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
         <div class="overflow-hidden min-w-0">
           <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Watchlist</span>
         </div>