feat: remove blinking sidebar

Author: LeadcodeDev

apps/docs/src/components/sidebar.tsx

@@ -8,7 +8,15 @@ interface SidebarProps {
   currentPath: string
 }
 
-export function Sidebar({ items, currentPath }: SidebarProps) {
+export function Sidebar({ items, currentPath: initialPath }: SidebarProps) {
+  const [currentPath, setCurrentPath] = React.useState(initialPath)
+
+  React.useEffect(() => {
+    const handleSwap = () => setCurrentPath(window.location.pathname)
+    document.addEventListener('astro:after-swap', handleSwap)
+    return () => document.removeEventListener('astro:after-swap', handleSwap)
+  }, [])
+
   return (
     <nav className="flex-1 overflow-y-auto">
       <ul>
@@ -28,6 +36,12 @@ function SidebarItem({ item, currentPath, depth = 0 }: { item: NavItem; currentP
     return false
   })
 
+  React.useEffect(() => {
+    if (item.type === 'category') {
+      setOpen(isActiveCategory(item, currentPath))
+    }
+  }, [currentPath, item])
+
   // Group: bold label, no collapse, children always visible, depth resets
   if (item.type === 'group') {
     return (

apps/docs/src/layouts/docs.astro

@@ -127,7 +127,7 @@ const appUrlOverrides = {
       transition:animate="none"
     />
     <div class="flex max-w-350 mx-auto">
-      <div class="hidden lg:block w-64 shrink-0 border-r h-[calc(100vh-var(--header-height))] overflow-y-auto sticky top-(--header-height) py-6 pl-3 pr-3" transition:animate="none">
+      <div class="hidden lg:block w-64 shrink-0 border-r h-[calc(100vh-var(--header-height))] overflow-y-auto sticky top-(--header-height) py-6 pl-3 pr-3" transition:persist transition:animate="none">
         <Sidebar items={navItems} currentPath={currentPath} client:load />
       </div>
       <main class="flex-1 min-w-0 px-4 sm:px-8 py-6" transition:animate="none">