2e:"/_next/static/immutable/chunks/02uj9wr740ifu.js" 2f:I[55167,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"SidebarDemo"] 30:I[48147,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"SourcePanel"] 31:T543e,"use client"; import { useCallback, useRef, useState, type ComponentType, type ReactNode, } from "react"; import { Bank, Bullhorn, Calendar, Chat, FaceSmile, Headphones, Health, Home, ImageSparkle, Kanban, Search, Setting, X } from "reicon-react"; import { SidebarFilled } from "@/components/atoms/icons"; import { SettingsModal } from "@/components/blocks/settings/settings-modal"; import { ThemeToggle } from "@/components/primitives/theme-toggle"; import { Badge } from "@/components/atoms/badge"; import { CloseButton } from "@/components/atoms/close-button"; import { Kbd } from "@/components/atoms/kbd"; import { cx } from "@/lib/utils"; import { measureNavSelectionThumb, navSelectionThumbClass, sidebarNavScrollerClass, type NavSelectionThumb, } from "@/components/lib/sidebar-nav-chrome"; import { DashboardTeamMenu } from "@/components/blocks/sidebar/sidebar-team-menu"; import { DashboardUserMenu } from "@/components/blocks/sidebar/sidebar-user-menu"; import { useSelectionThumb } from "@/lib/use-selection-thumb"; import { useDismissOnOutsidePress } from "@/lib/use-dismiss-on-outside-press"; import { useDomLayout } from "@/lib/use-dom-layout"; import { useMountEffect } from "@/lib/use-mount-effect"; /** * Figma sources: * expanded → dashboard 1 → Sidebar (node 3731:2934) * collapsed → Sidebar (node 3768:3382) * * Floating sidebar panel. Expanded: 260px wide, p 12, radius/3xl (24px), * white 1px border, "Background/Sidebar Elevation" shadow, bg * background/secondary. Collapsed: 60px wide (36px icon items + 12px * padding); collapse button sits centered above the workspace avatar, quick * search becomes a 36px neutral-200 square, nav items become icon-only * squares, the team card reduces to its avatar. * * The two states morph into each other: the panel width animates while * labels / badges / kbd collapse via max-width + opacity. */ type IconComponent = ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false"; }>; /** * Collapsible text/badge slot: blurs + fades + shrinks away when the rail * closes, and blurs back in on expand. The icons/rows themselves stay pinned in * place — only these label/badge slots animate — so nothing jumps to center. */ function Collapsible({ collapsed, children, className }: { collapsed: boolean; children: ReactNode; className?: string }) { return ( {children} ); } function NavItem({ icon: Icon, label, badge, isSelected = false, collapsed = false, href = "#", onClick, }: { icon: IconComponent; label: string; badge?: ReactNode; isSelected?: boolean; collapsed?: boolean; href?: string; /** Action rows (e.g. Settings → modal) intercept the navigation. */ onClick?: () => void; }) { return ( { event.preventDefault(); onClick(); } : undefined } aria-current={isSelected ? "page" : undefined} aria-label={label} title={collapsed ? label : undefined} data-nav-selected={isSelected ? "true" : undefined} className={cx( "relative z-10 flex items-center justify-between overflow-hidden rounded-2lg p-2", "button-press-motion transition-[width,background-color] duration-300 ease-in-out", collapsed ? "w-9" : "w-full", isSelected ? "text-ink" : "text-ink-2 hover:bg-hover", )} > {label} {badge && {badge}} ); } /** Compact icon-only action for the utilities strip: the same 36px hit area * and hover treatment as a collapsed NavItem, so its icon stays aligned with * the nav icons above it. */ function UtilityButton({ icon: Icon, label, onClick, }: { icon: IconComponent; label: string; onClick?: () => void; }) { return ( ); } /** A primary navigation row. Rows without an `href` are decoration only. */ export interface DashboardNavItem { key: string; label: string; icon: IconComponent; href?: string; badge?: string | number; } /** Kept as a name for callers that typed their `selected` prop; any key works. */ export type DashboardNavKey = string; /** Default navigation rows; pass your own `items` with `href`s to link them. */ export const DASHBOARD_NAV: DashboardNavItem[] = [ { key: "home", label: "Overview", icon: Home, badge: 4 }, { key: "projects", label: "Workspaces", icon: Kanban }, { key: "campaigns", label: "Announcements", icon: Bullhorn }, { key: "calendar", label: "Schedule", icon: Calendar }, { key: "billing", label: "Invoices", icon: Bank }, { key: "reports", label: "Insights", icon: Health }, { key: "agents", label: "Runs", icon: Chat }, { key: "images", label: "Assets", icon: ImageSparkle }, { key: "profile", label: "Members", icon: FaceSmile }, ]; /** * The primary rows. A component of its own so the closures over `collapsed` * and the search query live here: built inline in the sidebar, the compiler * could not tell they leave `mobile` untouched and dropped the sidebar's * manual memoization. */ function NavRows({ items, query, selected, collapsed, secondaryMatch, onSelectItem, }: { items: DashboardNavItem[]; query: string; selected: string; collapsed: boolean; /** Whether Support or Settings matches, so "No results" only shows when nothing does. */ secondaryMatch: boolean; onSelectItem?: (key: string) => void; }) { const [navRef, thumb] = useSelectionThumb({ selector: '[data-nav-selected="true"]', items: "a", attributes: ["data-nav-selected"], measure: measureNavSelectionThumb, }); const shown = items.filter((item) => item.label.toLocaleLowerCase().includes(query)); if (shown.length === 0 && !secondaryMatch && !collapsed) { return

No results

; } return (

{thumb && shown.some((item) => item.key === selected) && ( )} {shown.map((item) => { const isSelected = selected === item.key; return ( onSelectItem(item.key) : undefined} badge={ item.badge !== undefined ? ( {item.badge} ) : undefined } /> ); })}

); } export function DashboardSidebar({ mobile = false, onClose, fluid = false, showThemeToggle = true, selected = "home", onSelectedChange, items = DASHBOARD_NAV, flat = false, /** When set, quick search opens this callback instead of filtering nav in place (shell / jump field). */ onQuickSearch, className, }: { /** Rendered inside the mobile drawer: always expanded, close button instead of collapse. */ mobile?: boolean; onClose?: () => void; /** Expanded width fills its container below `lg` instead of the fixed * 260px (e.g. the landing page, where the sidebar isn't in a drawer). * Collapsed width stays the fixed 60px rail at every breakpoint — the * whole point of collapsing is to shrink, so it must never get * overridden back to full width. */ fluid?: boolean; /** Hide the app-level theme control when the sidebar is used as marketing artwork. */ showThemeToggle?: boolean; /** Which nav item shows the selected (primary accent gradient) state. */ selected?: DashboardNavKey; /** Demo / shell: update selection on row click (no routing). */ onSelectedChange?: (key: DashboardNavKey) => void; /** Primary navigation rows. The Pro dashboard's set unless a screen brings its own. */ items?: DashboardNavItem[]; /** Removes the floating panel treatment for a sidebar revealed beneath mobile content. */ flat?: boolean; onQuickSearch?: () => void; className?: string; } = {}) { const [collapsedState, setCollapsed] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); const [suppressUserHover, setSuppressUserHover] = useState(false); const [searchActive, setSearchActive] = useState(false); const [query, setQuery] = useState(""); const searchTriggerRef = useRef(null); const searchFieldRef = useRef(null); const searchInputRef = useRef(null); const collapsed = mobile ? false : collapsedState; const normalizedQuery = query.trim().toLocaleLowerCase(); const matches = (label: string) => label.toLocaleLowerCase().includes(normalizedQuery); const secondaryLabels = ["Support", "Settings"]; const secondaryMatch = secondaryLabels.some(matches); const activateSearch = useCallback(() => { if (onQuickSearch) { onQuickSearch(); return; } if (!mobile) setCollapsed(false); setSearchActive(true); // The input mounts on this commit; focus it once it's in the tree. window.requestAnimationFrame(() => searchInputRef.current?.focus()); }, [mobile, onQuickSearch]); const deactivateSearch = useCallback((restoreFocus: boolean) => { setQuery(""); setSearchActive(false); if (restoreFocus) { window.requestAnimationFrame(() => searchTriggerRef.current?.focus()); } }, []); useDismissOnOutsidePress(searchActive, () => deactivateSearch(false), [searchFieldRef]); const activateSearchRef = useRef(activateSearch); useDomLayout(() => { activateSearchRef.current = activateSearch; }); useMountEffect(() => { const onShortcut = (event: KeyboardEvent) => { if (event.key.toLocaleLowerCase() === "l" && (event.metaKey || event.ctrlKey)) { event.preventDefault(); activateSearchRef.current(); } }; window.addEventListener("keydown", onShortcut); return () => window.removeEventListener("keydown", onShortcut); }); const surface = flat ? "bg-page" : "bg-canvas"; return (

{/* Top chrome never scrolls. Negative margin borrows the rail's padding so rings and hover pills are not clipped. */}

{/* Workspace switcher / collapse control */}

{/* The clip is here to hide the label as `max-width` animates shut, but it also cropped the trigger's hover pill down to four corner arcs. Same trick as the scroller: pad the clip box out by the pill's 8px reach and pull it back with a negative margin, so the widths below are 16px larger than the footprint they produce. */}

setSuppressUserHover(false)} avatarClassName={ flat ? "bg-hover-2 dark:bg-canvas" : undefined } />

{mobile && flat ? (

setQuery(event.target.value)} onKeyDown={(event) => { if (event.key === "Escape") { event.preventDefault(); deactivateSearch(true); } }} placeholder="Search..." tabIndex={searchActive ? 0 : -1} className={cx( "min-w-0 bg-transparent text-body-medium tracking-[-0.015em] text-ink outline-none placeholder:text-ink-3", "transition-[width,opacity] duration-200 ease-in-out", searchActive ? "w-full flex-1 opacity-100 delay-100" : "pointer-events-none w-0 flex-none opacity-0 delay-0", )} /> deactivateSearch(true)} className={cx( "shrink-0 bg-line transition-opacity duration-150", searchActive ? "opacity-100 delay-150" : "pointer-events-none opacity-0 delay-0", )} />

) : mobile ? ( ) : ( )}

{/* Quick search */} {!flat && (onQuickSearch || !(searchActive && !collapsed) ? (

setQuery(event.target.value)} onKeyDown={(event) => { if (event.key === "Escape") { event.preventDefault(); deactivateSearch(true); } }} placeholder="Search navigation…" className="min-w-0 flex-1 bg-transparent text-body-medium text-ink outline-none placeholder:text-ink-3" /> deactivateSearch(true)} className="bg-line" />

) : ( ))}

{/* Primary shrinks and scrolls only when the rail is short; utilities are a single 36px icon strip pinned underneath (a vertical stack when the rail is collapsed), so they cost the nav one row instead of three. */}

{/* Team card → opens the profile menu next to the sidebar */} setSettingsOpen(false)} />

); } 2b:["$","article",null,{"className":"doc-article","children":[["$","header",null,{"className":"doc-article-header","children":[["$","p",null,{"className":"doc-article-kicker","children":["Blocks"," · ","Navigation"]}],["$","h1",null,{"className":"doc-article-title","children":"Sidebar"}],["$","p",null,{"className":"doc-article-lead","children":"Floating rail with quick search, workspace switcher, and team menu."}]]}],["$","section",null,{"className":"doc-demo","aria-label":"Sidebar demo","children":["$","div",null,{"className":"doc-demo-stage","children":["$","$L2f",null,{}]}]}],null,["$","$L30",null,{"source":"$31","deps":["react-aria-components","motion"]}],"$L32"]}]