Address sidebar edge cases with UX

huangsam · huangsam · commit 84e856220658 · 2026-07-07T00:54:15.000-07:00
diff --git a/ui/src/components/Sidebar.astro b/ui/src/components/Sidebar.astro
@@ -38,7 +38,7 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     (function() {
       const stored = localStorage.getItem('sidebar-collapsed');
       const isMobile = window.innerWidth < 900;
-      const isCollapsed = stored === 'true' || (stored === null && isMobile);
+      const isCollapsed = isMobile || stored === 'true';
       if (isCollapsed) {
         const container = document.querySelector('.app-container');
         if (container) {
@@ -372,7 +372,6 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
       right: 0;
       bottom: 0;
       background-color: rgba(0, 0, 0, 0.4);
-      backdrop-filter: blur(2px);
       z-index: 999;
     }
   }
@@ -467,7 +466,7 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     // Load initial state
     const stored = localStorage.getItem('sidebar-collapsed');
     const isMobile = window.innerWidth < 900;
-    const isCollapsed = stored === 'true' || (stored === null && isMobile);
+    const isCollapsed = isMobile || stored === 'true';
     if (isCollapsed) {
       container.classList.add('sidebar-collapsed');
     } else {
@@ -490,21 +489,27 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
 
     // Auto-collapse/expand on window resize transition
     let lastWidth = window.innerWidth;
+    let resizeTimer: any;
     window.addEventListener('resize', () => {
+      document.documentElement.classList.add('no-transition');
+
       const currentWidth = window.innerWidth;
       const wasDesktop = lastWidth >= 900;
       const isMobile = currentWidth < 900;
       
       if (wasDesktop && isMobile) {
         container.classList.add('sidebar-collapsed');
       } else if (!wasDesktop && !isMobile) {
-        const stored = localStorage.getItem('sidebar-collapsed');
-        const isCollapsed = stored === 'true';
-        if (!isCollapsed) {
-          container.classList.remove('sidebar-collapsed');
-        }
+        // Always expand the sidebar on desktop width and save state
+        container.classList.remove('sidebar-collapsed');
+        localStorage.setItem('sidebar-collapsed', 'false');
       }
       lastWidth = currentWidth;
+
+      clearTimeout(resizeTimer);
+      resizeTimer = window.setTimeout(() => {
+        document.documentElement.classList.remove('no-transition');
+      }, 100);
     });
   }
 
diff --git a/ui/src/layouts/Layout.astro b/ui/src/layouts/Layout.astro
@@ -12,7 +12,7 @@ const lang = getLangFromUrl(Astro.url);
 ---
 
 <!doctype html>
-<html lang={lang}>
+<html lang={lang} class="no-transition">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -33,3 +33,18 @@ const lang = getLangFromUrl(Astro.url);
     <slot />
   </body>
 </html>
+
+<script>
+  // Remove the no-transition class once the initial layout has settled
+  document.addEventListener('astro:page-load', () => {
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('no-transition');
+    });
+  });
+
+  // Re-apply no-transition before a page transition begins
+  document.addEventListener('astro:before-preparation', () => {
+    document.documentElement.classList.add('no-transition');
+  });
+</script>
+
diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
@@ -91,3 +91,10 @@ a:hover {
 .animate-fade-in {
   animation: fadeIn 0.3s ease-out forwards;
 }
+
+/* Prevent transition flashes on page load, navigation, and window resize */
+.no-transition,
+.no-transition * {
+  transition: none !important;
+}
+
