docs(layout): add dynamic top/bottom gradient fades for docs sidebar on scroll to improve navigation UX.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

web/src/app/docs/layout.tsx

@@ -2,7 +2,7 @@
 
 import { Menu } from 'lucide-react'
 import { usePathname } from 'next/navigation'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
 import { DocSidebar, sections } from '@/components/docs/doc-sidebar'
 import { Button } from '@/components/ui/button'
@@ -15,6 +15,9 @@ export default function DocsLayout({
 }) {
   const pathname = usePathname()
   const [open, setOpen] = useState(false)
+  const [showTopFade, setShowTopFade] = useState(false)
+  const [showBottomFade, setShowBottomFade] = useState(false)
+  const sidebarRef = useRef<HTMLDivElement>(null)
 
   // New: Smoothly scroll to hash target on back/forward navigation
   useEffect(() => {
@@ -32,14 +35,48 @@ export default function DocsLayout({
     return () => window.removeEventListener('hashchange', handleHashChange)
   }, [])
 
+  // Handle sidebar scroll for dynamic fade effects
+  useEffect(() => {
+    const sidebarElement = sidebarRef.current
+    if (!sidebarElement) return
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = sidebarElement
+      const isAtTop = scrollTop === 0
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1
+
+      setShowTopFade(!isAtTop)
+      setShowBottomFade(!isAtBottom)
+    }
+
+    // Check initial state
+    handleScroll()
+
+    sidebarElement.addEventListener('scroll', handleScroll)
+    return () => sidebarElement.removeEventListener('scroll', handleScroll)
+  }, [])
+
   return (
     <div className="pt-8">
       <div className="container flex md:space-x-8 overflow-x-hidden">
         <div className="hidden lg:block w-64 shrink-0">
-          <DocSidebar
-            className="fixed top-24 w-64 h-[calc(100vh-12rem)] overflow-y-auto pr-4 z-40"
-            onNavigate={() => setOpen(false)}
-          />
+          <div className="fixed top-24 w-64 h-[calc(100vh-12rem)] z-40">
+            {/* Dynamic gradient fade indicators */}
+            {showTopFade && (
+              <div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-background to-transparent pointer-events-none z-10 rounded-t-lg transition-opacity duration-200" />
+            )}
+            {showBottomFade && (
+              <div className="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-background to-transparent pointer-events-none z-10 rounded-b-lg transition-opacity duration-200" />
+            )}
+
+            {/* Enhanced scrollable container */}
+            <div
+              ref={sidebarRef}
+              className="relative h-full overflow-y-auto pr-4 pl-4 pt-6 pb-6 custom-scrollbar bg-background/95 backdrop-blur-sm rounded-lg border border-border/50 shadow-lg"
+            >
+              <DocSidebar className="" onNavigate={() => setOpen(false)} />
+            </div>
+          </div>
         </div>
         <main className="flex-1 mx-auto pb-36 md:px-8 min-w-0">{children}</main>
       </div>

web/src/styles/globals.css

@@ -133,3 +133,31 @@
 .terminal-code::-webkit-scrollbar-thumb:hover {
   @apply bg-zinc-600;
 }
+
+/* Enhanced docs sidebar scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  @apply bg-border/60 rounded-full;
+  transition: background-color 0.2s ease;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  @apply bg-border;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:active {
+  @apply bg-foreground/20;
+}
+
+/* Firefox scrollbar */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border) / 0.6) transparent;
+}