{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sidebar", "title": "Sidebar", "type": "registry:ui", "files": [ { "path": "packages/registry-react/components/sidebar/sidebar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { PanelLeft } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet'\nimport { Skeleton } from '@/components/ui/skeleton'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'\nimport { sidebarMenuButtonVariants } from './sidebar.variants'\n\n/* ------------------------------------------------------------------ */\n/* Constants (ported from utils.ts) */\n/* ------------------------------------------------------------------ */\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\n/* ------------------------------------------------------------------ */\n/* Context (React equivalent of reka-ui's provide/inject) */\n/* ------------------------------------------------------------------ */\n\ntype SidebarContextValue = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (value: boolean) => void\n isMobile: boolean\n openMobile: boolean\n setOpenMobile: (value: boolean) => void\n toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n return context\n}\n\n/* ------------------------------------------------------------------ */\n/* SidebarProvider */\n/* ------------------------------------------------------------------ */\n\nexport interface SidebarProviderProps extends React.ComponentProps<'div'> {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\nconst SidebarProvider = React.forwardRef(\n ({ defaultOpen = true, open: openProp, onOpenChange, className, style, children, ...props }, ref) => {\n // `useMediaQuery` returns `false` during SSR (no matchMedia) and\n // re-evaluates on the client's first effect. If the viewport is < 768px,\n // SSR HTML has the desktop branch but the client wants the mobile \n // branch -- React throws a hydration mismatch and the Sheet renders\n // without its overlay (the desktop sidebar's div is the parent the diff\n // lands against).\n //\n // Gating on `mounted` makes both the server and the client's first render\n // produce the desktop branch unconditionally; the effect then flips the\n // flag and `Sidebar`'s mobile branch re-runs against the real matchMedia\n // signal. Cost: a brief desktop-layout flash for mobile users on first\n // paint. That's the universal tradeoff for SSR-without-viewport-detection\n // -- there is no clean way to know the viewport on the server.\n const [mounted, setMounted] = React.useState(false)\n const [mediaMobile, setMediaMobile] = React.useState(false)\n\n React.useEffect(() => {\n setMounted(true)\n const mql = window.matchMedia('(max-width: 768px)')\n const onChange = () => setMediaMobile(mql.matches)\n onChange()\n mql.addEventListener('change', onChange)\n return () => mql.removeEventListener('change', onChange)\n }, [])\n\n const isMobile = mounted && mediaMobile\n const [openMobile, setOpenMobile] = React.useState(false)\n\n // Internal open state with optional controlled prop, mirroring the Vue\n // provider's plain ref (it defaulted to `true`).\n const [internalOpen, setInternalOpen] = React.useState(openProp ?? defaultOpen ?? true)\n const open = openProp ?? internalOpen\n\n const setOpen = React.useCallback(\n (value: boolean) => {\n if (onOpenChange) onOpenChange(value)\n else setInternalOpen(value)\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [onOpenChange],\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((v) => !v) : setOpen(!open)\n }, [isMobile, open, setOpen])\n\n React.useEffect(() => {\n const handler = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n window.addEventListener('keydown', handler)\n return () => window.removeEventListener('keydown', handler)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = React.useMemo(\n () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n )\n\n return (\n \n \n \n {children}\n \n \n \n )\n },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n/* ------------------------------------------------------------------ */\n/* Sidebar */\n/* ------------------------------------------------------------------ */\n\nexport interface SidebarProps extends React.ComponentProps<'div'> {\n side?: 'left' | 'right'\n variant?: 'sidebar' | 'floating' | 'inset'\n collapsible?: 'offcanvas' | 'icon' | 'none'\n}\n\nconst Sidebar = React.forwardRef(\n ({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === 'none') {\n return (\n \n {children}\n \n )\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
{children}
\n \n \n )\n }\n\n return (\n