{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "extends": "none", "name": "sidebar", "title": "sidebar", "description": "sidebar", "dependencies": [ "@heroicons/react", "react-aria-components", "tailwind-merge" ], "registryDependencies": [ "https://intentui.com/r/sheet", "https://intentui.com/r/tree", "https://intentui.com/r/use-mobile", "https://intentui.com/r/primitive", "https://intentui.com/r/button", "https://intentui.com/r/link", "https://intentui.com/r/tooltip" ], "files": [ { "path": "src/components/ui/sidebar.tsx", "content": "'use client'\n\nimport { ChevronDownIcon } from '@heroicons/react/20/solid'\nimport { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { type ButtonProps, Button as ButtonPrimitive } from 'react-aria-components/Button'\nimport { composeRenderProps } from 'react-aria-components/composeRenderProps'\nimport type { DisclosurePanelProps, DisclosureProps } from 'react-aria-components/Disclosure'\nimport { Disclosure, DisclosurePanel } from 'react-aria-components/Disclosure'\nimport { DisclosureGroup, type DisclosureGroupProps } from 'react-aria-components/DisclosureGroup'\nimport { Header } from 'react-aria-components/Header'\nimport { Heading } from 'react-aria-components/Heading'\nimport type { LinkProps, LinkRenderProps } from 'react-aria-components/Link'\nimport {\n Separator,\n type SeparatorProps as SidebarSeparatorProps,\n} from 'react-aria-components/Separator'\nimport { Text } from 'react-aria-components/Text'\nimport type { TreeItemContentProps, TreeItemProps, TreeProps } from 'react-aria-components/Tree'\nimport { Tree, TreeItem, TreeItemContent } from 'react-aria-components/Tree'\nimport { twJoin, twMerge } from 'tailwind-merge'\nimport { SheetContent } from '@/components/ui/sheet'\nimport { TreeIndicator } from '@/components/ui/tree'\nimport { useIsMobile } from '@/hooks/use-mobile'\nimport { cx } from '@/lib/primitive'\nimport { Button } from './button'\nimport { Link } from './link'\nimport { Tooltip, TooltipContent } from './tooltip'\n\nconst SIDEBAR_WIDTH = '17rem'\nconst SIDEBAR_WIDTH_DOCK = '3.25rem'\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (open: boolean) => void\n isOpenOnMobile: boolean\n setIsOpenOnMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext(null)\n\nconst useSidebar = () => {\n const context = use(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n\n return context\n}\n\ninterface SidebarProviderProps extends React.ComponentProps<'div'> {\n defaultOpen?: boolean\n isOpen?: boolean\n shortcut?: string\n onOpenChange?: (open: boolean) => void\n}\n\nconst SidebarProvider = ({\n defaultOpen = true,\n isOpen: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n shortcut = 'b',\n ref,\n ...props\n}: SidebarProviderProps) => {\n const [openMobile, setOpenMobile] = useState(false)\n\n const [internalOpenState, setInternalOpenState] = useState(defaultOpen)\n const open = openProp ?? internalOpenState\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value\n\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n setInternalOpenState(openState)\n }\n\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open]\n )\n\n const isMobile = useIsMobile()\n const isMobileRef = useRef(isMobile)\n isMobileRef.current = isMobile\n\n const toggleSidebar = useCallback(() => {\n if (isMobileRef.current) {\n setOpenMobile((prev) => !prev)\n } else {\n setOpen((prev) => !prev)\n }\n }, [setOpen])\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === shortcut && (event.metaKey || event.ctrlKey)) {\n const activeElement = document.activeElement\n\n const isInTextInput =\n activeElement instanceof HTMLInputElement ||\n activeElement instanceof HTMLTextAreaElement ||\n activeElement?.getAttribute('contenteditable') === 'true' ||\n activeElement?.getAttribute('role') === 'textbox'\n\n if (!isInTextInput) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [toggleSidebar, shortcut])\n\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile: isMobile ?? false,\n isOpenOnMobile: openMobile,\n setIsOpenOnMobile: setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n )\n\n if (isMobile === undefined) {\n return null\n }\n\n return (\n \n \n {children}\n \n \n )\n}\n\ninterface SidebarProps extends React.ComponentProps<'div'> {\n intent?: 'default' | 'float' | 'inset'\n collapsible?: 'hidden' | 'dock' | 'none'\n side?: 'left' | 'right'\n closeButton?: boolean\n}\n\nconst Sidebar = ({\n children,\n closeButton = true,\n collapsible = 'hidden',\n side = 'left',\n intent = 'default',\n className,\n ...props\n}: SidebarProps) => {\n const { isMobile, state, isOpenOnMobile, setIsOpenOnMobile } = useSidebar()\n if (collapsible === 'none') {\n return (\n \n {children}\n \n )\n }\n\n if (isMobile) {\n return (\n <>\n \n \n {children}\n \n \n )\n }\n\n return (\n