Docs/feature sidebar integrations (CopilotKit#2994)

Author: johnprg

docs/.gitignore

@@ -26,4 +26,7 @@ yarn-error.log*
 # others
 .env*.local
 .vercel
-next-env.d.ts
+next-env.d.ts
+
+# Claude session context
+SESSION_CONTEXT.md

docs/app/(home)/layout.tsx

@@ -5,6 +5,7 @@ import { baseOptions } from "../layout.config"
 import { source } from "@/app/source"
 import ConditionalSidebar from "@/components/layout/conditional-sidebar"
 import Navbar from "@/components/layout/navbar"
+import { ScrollReset } from "@/components/layout/scroll-reset"
 import { patchPageTree } from "@/lib/patch-pagetree"
 
 export default function Layout({ children }: { children: ReactNode }) {
@@ -16,6 +17,7 @@ export default function Layout({ children }: { children: ReactNode }) {
       <HomeLayout {...baseOptions} nav={{ enabled: false }}>
         <ConditionalSidebar pageTree={patchedPageTree} />
         <div className="docs-content-wrapper">
+          <ScrollReset />
           <DocsLayout
             tree={patchedPageTree}
             searchToggle={{ enabled: false }}

docs/app/global.css

@@ -144,8 +144,8 @@
   --sidebar-ring: oklch(0.65 0.15 285);
   --sidebar-separator: oklch(0.6119 0.0089 286.13);
   --scrollbar-color: oklch(1 0 0 / 30.2%);
-  --scrollbar-track: #182326;
-  --glass-background: #182326; 
+  --scrollbar-track: #292D2F;
+  --glass-background: rgba(255, 255, 255, 0.1); 
   --icon: oklch(1 0 0);
 }
 
@@ -250,7 +250,7 @@ figure > div.bg-fd-secondary.rounded-lg.border.text-\[13px\].py-3\.5.overflow-au
 }
 
 .dark .docs-content-wrapper {
-  background: linear-gradient(to right, rgba(1, 5, 7, 0.10), rgba(1, 5, 7, 0)), var(--glass-background) !important;
+  background: linear-gradient(to right, rgba(1, 5, 7, 0.10), rgba(1, 5, 7, 0)), var(--sidebar) !important;
 }
 
 .dark .docs-content-wrapper #nd-docs-layout,

docs/app/integrations/layout.tsx

@@ -5,17 +5,19 @@ import { baseOptions } from "../layout.config"
 import { source } from "@/app/source"
 import IntegrationsSidebar from "@/components/layout/integrations-sidebar"
 import Navbar from "@/components/layout/navbar"
+import { ScrollReset } from "@/components/layout/scroll-reset"
 import { patchPageTree } from "@/lib/patch-pagetree"
 
 export default function Layout({ children }: { children: ReactNode }) {
   const patchedPageTree = patchPageTree(source.pageTree);
-  
+
   return (
     <>
       <Navbar pageTree={patchedPageTree} />
       <HomeLayout {...baseOptions} nav={{ enabled: false }}>
         <IntegrationsSidebar pageTree={patchedPageTree} />
         <div className="docs-content-wrapper">
+          <ScrollReset />
           <DocsLayout
             tree={patchedPageTree}
             searchToggle={{ enabled: false }}

docs/app/logo.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import Image from "next/image"
 import Link from "fumadocs-core/link"
 import { cn } from "@/lib/utils"
@@ -18,9 +20,18 @@ export function Logo({
   width = DESKTOP_WIDTH,
   height = DESKTOP_HEIGHT,
 }: LogoProps) {
+  const handleLogoClick = (e: React.MouseEvent) => {
+    // Clear the integration selection from localStorage
+    localStorage.removeItem('selectedIntegration')
+    localStorage.setItem('lastDocsPath', '/')
+    // Dispatch custom event to notify IntegrationSelector
+    window.dispatchEvent(new CustomEvent('clearIntegrationSelection'))
+  }
+
   return (
     <Link
       href="/"
+      onClick={handleLogoClick}
       className={cn("flex justify-center items-center", className)}
     >
       <Image

docs/components/layout/banners.tsx

@@ -8,8 +8,14 @@ import { SiCrewai } from "@icons-pack/react-simple-icons";
 import { Sparkles, Rocket } from "lucide-react";
 import { useState, useEffect } from "react";
 
+// Time in milliseconds before a dismissed banner reappears
+const BANNER_REAPPEAR_DELAY = 3 * 24 * 60 * 60 * 1000; // 3 days
+const BANNER_DISMISSED_KEY = "nd-banner-rotating-banner";
+const BANNER_DISMISSED_TIME_KEY = "nd-banner-rotating-banner-dismissed-at";
+
 export function Banners() {
   const [currentBanner, setCurrentBanner] = useState(0);
+  const [key, setKey] = useState(0); // Force re-render to show banner again
 
   const bannerContent = [
     {
@@ -28,6 +34,7 @@ export function Banners() {
     }
   ];
 
+  // Rotate banners
   useEffect(() => {
     const interval = setInterval(() => {
       setCurrentBanner((prev) => (prev + 1) % bannerContent.length);
@@ -36,10 +43,66 @@ export function Banners() {
     return () => clearInterval(interval);
   }, []);
 
+  // Check for dismissed banner and handle reappearance based on timestamp
+  useEffect(() => {
+    const checkBannerExpiry = () => {
+      const isDismissed = localStorage.getItem(BANNER_DISMISSED_KEY) === "true";
+      
+      if (isDismissed) {
+        const dismissedAt = localStorage.getItem(BANNER_DISMISSED_TIME_KEY);
+        
+        if (dismissedAt) {
+          const elapsed = Date.now() - parseInt(dismissedAt, 10);
+          
+          if (elapsed >= BANNER_REAPPEAR_DELAY) {
+            // Time has passed - show banner again
+            localStorage.removeItem(BANNER_DISMISSED_KEY);
+            localStorage.removeItem(BANNER_DISMISSED_TIME_KEY);
+            setKey((prev) => prev + 1);
+          } else {
+            // Schedule check for when delay expires
+            const remaining = BANNER_REAPPEAR_DELAY - elapsed;
+            const timeout = setTimeout(() => {
+              localStorage.removeItem(BANNER_DISMISSED_KEY);
+              localStorage.removeItem(BANNER_DISMISSED_TIME_KEY);
+              setKey((prev) => prev + 1);
+            }, remaining);
+            return () => clearTimeout(timeout);
+          }
+        } else {
+          // Banner was just dismissed - record the time
+          localStorage.setItem(BANNER_DISMISSED_TIME_KEY, Date.now().toString());
+        }
+      }
+    };
+
+    checkBannerExpiry();
+
+    // Also listen for storage changes (in case dismissed in this or another tab)
+    const handleStorage = () => {
+      const isDismissed = localStorage.getItem(BANNER_DISMISSED_KEY) === "true";
+      const hasTimestamp = localStorage.getItem(BANNER_DISMISSED_TIME_KEY);
+      
+      if (isDismissed && !hasTimestamp) {
+        localStorage.setItem(BANNER_DISMISSED_TIME_KEY, Date.now().toString());
+      }
+    };
+
+    window.addEventListener("storage", handleStorage);
+    
+    // Also check periodically in case the banner was dismissed while on this page
+    const interval = setInterval(checkBannerExpiry, 1000);
+    
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+      clearInterval(interval);
+    };
+  }, [key]);
+
   const content = bannerContent[currentBanner];
 
   return (
-    <div className="w-full px-1 mt-1 xl:px-2 xl:mt-2">
+    <div key={key} className="w-full px-1 mt-1 xl:px-2 xl:mt-2">
       <Banner className="w-full text-foreground bg-secondary/80 backdrop-blur-sm border border-border rounded-2xl py-1.5 md:py-2" id="rotating-banner">
         <div className="flex flex-row items-center justify-center gap-1.5 md:gap-3 w-full px-1 md:px-4">
           <div 

docs/components/layout/conditional-sidebar.tsx

@@ -54,10 +54,10 @@ export default function ConditionalSidebar({ pageTree }: ConditionalSidebarProps
   if (isIntegrationRoute) {
     return <IntegrationsSidebar pageTree={pageTree} />
   }
-  
+
   if (isReferenceRoute && referencePageTree) {
-    return <Sidebar pageTree={referencePageTree} />
+    return <Sidebar pageTree={referencePageTree} showIntegrationSelector={false} />
   }
-  
+
   return <Sidebar pageTree={pageTree} />
 }

docs/components/layout/mobile-sidebar.tsx

@@ -23,6 +23,7 @@ import { Integration } from "../ui/integrations-sidebar/integration-selector"
 import { INTEGRATION_ORDER, INTEGRATION_METADATA } from "@/lib/integrations"
 import { normalizeUrl } from "@/lib/analytics-utils"
 
+
 interface MobileSidebarProps {
   pageTree: DocsLayoutProps["tree"]
   setIsOpen: (isOpen: boolean) => void
@@ -239,7 +240,7 @@ const MobileSidebar = ({
 
           <Dropdown onSelect={handleClose} />
 
-          {isIntegrationRoute && (
+          {!isReferenceRoute && (
             <IntegrationSelector
               selectedIntegration={selectedIntegration}
               setSelectedIntegration={setSelectedIntegration}

docs/components/layout/navbar.tsx

@@ -11,7 +11,6 @@ import SearchDialogButton from "@/components/ui/search-button"
 import MobileSidebar from "@/components/layout/mobile-sidebar"
 // Icons
 import RocketIcon from "@/components/ui/icons/rocket"
-import PuzzleIcon from "@/components/ui/icons/puzzle"
 import ConsoleIcon from "@/components/ui/icons/console"
 import CloudIcon from "@/components/ui/icons/cloud"
 import GithubIcon from "@/components/ui/icons/github"
@@ -34,14 +33,9 @@ interface NavbarProps {
 export const LEFT_LINKS: NavbarLink[] = [
   {
     icon: <RocketIcon />,
-    label: "Overview",
+    label: "Documentation",
     href: "/",
   },
-  {
-    icon: <PuzzleIcon />,
-    label: "Integrations",
-    href: "/integrations",
-  },
   {
     icon: <ConsoleIcon />,
     label: "API Reference",
@@ -57,11 +51,6 @@ export const LEFT_LINKS: NavbarLink[] = [
 ]
 
 const RIGHT_LINKS: NavbarLink[] = [
-  {
-    icon: <ConsoleIcon />,
-    href: "/reference",
-    label: "API Reference",
-  },
   {
     icon: <CloudIcon />,
     href: "https://cloud.copilotkit.ai",
@@ -82,8 +71,28 @@ const RIGHT_LINKS: NavbarLink[] = [
 
 const Navbar = ({ pageTree }: NavbarProps) => {
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false)
+  const [lastDocsPath, setLastDocsPath] = useState<string | null>(null)
   const pathname = usePathname()
-  const activeRoute = pathname === "/" ? "/" : `/${pathname.split("/")[1]}`
+
+  // Read localStorage on client only to avoid hydration mismatch
+  useEffect(() => {
+    setLastDocsPath(localStorage.getItem('lastDocsPath'))
+  }, [])
+
+  // Determine active route based on current path
+  const firstSegment = pathname === "/" ? "/" : `/${pathname.split("/")[1]}`
+  const isReferencePage = firstSegment === "/reference"
+  // Reference pages → /reference, Everything else (root + integrations) → /
+  const activeRoute = isReferencePage ? "/reference" : "/"
+
+  // Get the appropriate href for Documentation link
+  const getDocumentationHref = () => {
+    // If we're on a reference page, try to restore last docs path
+    if (isReferencePage && lastDocsPath) {
+      return lastDocsPath
+    }
+    return '/'
+  }
 
   // Close mobile sidebar when viewport expands beyond mobile breakpoint (md: 768px)
   useEffect(() => {
@@ -126,15 +135,17 @@ const Navbar = ({ pageTree }: NavbarProps) => {
             <Logo className="pl-6" />
             <ul className="hidden gap-6 items-center h-full md:flex">
               {LEFT_LINKS.map((link) => {
-                // Hide API Reference and Copilot Cloud at narrow widths
-                const hideAtNarrow = link.label === "API Reference" || link.label === "Copilot Cloud";
-                // Hide icons for Overview and Integrations at very narrow widths
-                const hideIconAtNarrow = link.label === "Overview" || link.label === "Integrations";
-                
+                // Hide only Copilot Cloud at narrow widths
+                const hideAtNarrow = link.label === "Copilot Cloud";
+                // Hide icons for Documentation and API Reference at very narrow widths
+                const hideIconAtNarrow = link.label === "Documentation" || link.label === "API Reference";
+                // Use dynamic href for Documentation link
+                const href = link.label === "Documentation" ? getDocumentationHref() : link.href;
+
                 return (
-                  <li key={link.href} className={`relative h-full group ${hideAtNarrow ? '[@media(width<1112px)]:hidden' : ''}`}>
+                  <li key={link.href} className={`relative h-full group ${hideAtNarrow ? '[@media(width<1028px)]:hidden' : ''}`}>
                     <Link
-                      href={link.href}
+                      href={href}
                       target={link.target}
                       className={`h-full ${
                         activeRoute === link.href ? "opacity-100" : "opacity-50"
@@ -201,15 +212,15 @@ const Navbar = ({ pageTree }: NavbarProps) => {
             style={{ backgroundColor: 'var(--sidebar)' }}
           >
             {RIGHT_LINKS.map((link) => {
-              // For API Reference and Copilot Cloud, only show at narrow widths (between 768px and 1112px)
-              const isIconOnlyLink = link.label === "API Reference" || link.label === "Copilot Cloud";
-              
+              // Only show Copilot Cloud at narrow widths (between 768px and 1028px)
+              const isIconOnlyLink = link.label === "Copilot Cloud";
+
               return (
                 <Link
                   key={link.href}
                   href={link.href}
                   target={link.target}
-                  className={`${isIconOnlyLink ? '[@media(width>=1112px)]:hidden [@media(width<768px)]:hidden' : 'hidden'} justify-center items-center w-11 h-full md:flex`}
+                  className={`${isIconOnlyLink ? '[@media(width>=1028px)]:hidden [@media(width<768px)]:hidden' : 'hidden'} justify-center items-center w-11 h-full md:flex`}
                   title={link.label}
                   suppressHydrationWarning={link.target === "_blank"}
                 >

docs/components/layout/scroll-reset.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { useEffect } from "react"
+import { usePathname } from "next/navigation"
+
+/**
+ * Resets scroll position of the parent scroll container when navigating to a new page.
+ * Fixes issue where scroll position persists when using collapsed TOC navigation.
+ */
+export function ScrollReset() {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    // Find the scroll container (docs-content-wrapper)
+    const scrollContainer = document.querySelector('.docs-content-wrapper')
+    if (scrollContainer) {
+      scrollContainer.scrollTop = 0
+    }
+  }, [pathname]) // Run whenever pathname changes
+
+  return null // This component doesn't render anything
+}