{"$schema":"https://ui.shadcn.com/schema/registry.json","author":"Kaiyu Hsu ","categories":["navigation","minimal"],"dependencies":["lucide-react"],"description":"A shadcn-inspired application sidebar with a draggable resize handle.","devDependencies":[],"files":[{"content":"import { Fragment } from \"react\";\n\nexport const Dashboard = () => (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {Array.from({ length: 20 }, (_, index) => (\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n ))}\n
\n
\n
\n
\n
\n);\n","path":"/dashboard.tsx","target":"uicapsule/sidebar/dashboard.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport { Dashboard } from \"./dashboard\";\nimport { Sidebar } from \"./sidebar\";\n\nconst Preview = () => (\n \n \n \n
\n);\n\nexport default Preview;\n","path":"/preview.tsx","target":"uicapsule/sidebar/preview.tsx","type":"registry:file"},{"content":"import type { ReactNode } from \"react\";\nimport {\n BarChart3,\n Bell,\n Building,\n Building2,\n CheckSquare,\n ChevronDown,\n DollarSign,\n FileText,\n GitBranch,\n Grid3X3,\n Link,\n Mail,\n Settings,\n Star,\n Users,\n Workflow,\n} from \"lucide-react\";\n\nimport { useResizableSidebar } from \"./use-resizable-sidebar\";\n\ninterface NavItem {\n id: string;\n label: string;\n /** A lucide element, or a plain string to render an emoji glyph instead. */\n icon: ReactNode;\n isActive?: boolean;\n subItems?: NavItem[];\n}\n\nconst navigationItems: NavItem[] = [\n { icon: , id: \"notifications\", label: \"Notifications\" },\n { icon: , id: \"tasks\", label: \"Tasks\" },\n { icon: , id: \"emails\", label: \"Emails\" },\n { icon: , id: \"reports\", label: \"Reports\" },\n {\n icon: ,\n id: \"automations\",\n label: \"Automations\",\n subItems: [\n { icon: , id: \"workflows\", label: \"Workflows\" },\n { icon: , id: \"sequences\", label: \"Sequences\" },\n ],\n },\n];\n\nconst favoritesItems: NavItem[] = [\n {\n icon: ,\n id: \"onboarding-pipeline\",\n label: \"Onboarding pipeline\",\n },\n {\n icon: ,\n id: \"top-of-funnel\",\n label: \"Top of funnel\",\n },\n {\n icon: ,\n id: \"revops-workflows\",\n label: \"RevOps workflows\",\n },\n];\n\nconst recordsItems: NavItem[] = [\n {\n icon: ,\n id: \"companies\",\n isActive: true,\n label: \"Companies\",\n },\n { icon: , id: \"people\", label: \"People\" },\n { icon: , id: \"deals\", label: \"Deals\" },\n { icon: , id: \"workspaces\", label: \"Workspaces\" },\n { icon: , id: \"partnerships\", label: \"Partnerships\" },\n];\n\n/** Emoji glyphs need the centring wrapper a component icon draws itself. */\nconst EmojiIcon = ({ children }: { children: string }) => (\n \n {children}\n \n);\n\nconst listsItems: NavItem[] = [\n {\n icon: 🚀,\n id: \"strategic-accounts\",\n label: \"Strategic accounts\",\n },\n];\n\nconst NavigationItem = ({ item }: { item: NavItem }) => (\n
\n \n
{item.icon}
\n \n {item.label}\n \n {item.subItems && }\n
\n {item.subItems && (\n
\n {item.subItems.map((subItem) => (\n
\n
\n \n
\n ))}\n
\n )}\n
\n);\n\nconst NavigationSection = ({ title, items }: { title: string; items: NavItem[] }) => (\n
\n
\n \n \n {title}\n \n
\n
    \n {items.map((item) => (\n \n ))}\n
\n
\n);\n\nexport const Sidebar = () => {\n const { handleMouseDown } = useResizableSidebar();\n\n return (\n
\n
\n
\n \n
\n Dataembed\n
\n \n \n \n
\n \n \n \n \n \n \n \n
\n
\n
\n
\n \n \n \n \n \n \n Quick actions\n \n
\n
\n \n ⌘K\n \n
\n
\n
\n
\n
    \n {navigationItems.map((item) => (\n \n ))}\n
\n
\n\n \n \n \n
\n
\n\n {/* Resize Handle */}\n {/* oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- mouse-only resize affordance; the sidebar is fully usable at its default width, so there is no keyboard equivalent to provide */}\n \n
\n );\n};\n","path":"/sidebar.tsx","target":"uicapsule/sidebar/sidebar.tsx","type":"registry:file"},{"content":"import { useEffect, useRef } from \"react\";\nimport type { MouseEvent as ReactMouseEvent } from \"react\";\n\ninterface UseResizableSidebarOptions {\n defaultWidth?: number;\n minWidth?: number;\n maxWidth?: number;\n}\n\nexport const useResizableSidebar = ({\n defaultWidth = 240,\n minWidth = 100,\n maxWidth = 300,\n}: UseResizableSidebarOptions = {}) => {\n const startXRef = useRef(0);\n const startWidthRef = useRef(0);\n const isResizingRef = useRef(false);\n\n const handleMouseDown = (e: ReactMouseEvent) => {\n e.preventDefault();\n isResizingRef.current = true;\n startXRef.current = e.clientX;\n // oxlint-disable-next-line unicorn/prefer-number-coercion -- parseInt tolerates a trailing unit the replace() misses; Number() would NaN on it\n startWidthRef.current = Number.parseInt(\n getComputedStyle(document.documentElement)\n .getPropertyValue(\"--sidebar-width\")\n .replace(\"px\", \"\") || defaultWidth.toString(),\n 10,\n );\n document.body.style.cursor = \"col-resize\";\n document.body.style.userSelect = \"none\";\n };\n\n useEffect(() => {\n document.documentElement.style.setProperty(\"--sidebar-width\", `${defaultWidth}px`);\n\n // The width lives in a CSS variable rather than state so dragging never re-renders.\n const handleMouseMove = (e: MouseEvent) => {\n if (!isResizingRef.current) {\n return;\n }\n\n const newWidth = startWidthRef.current + (e.clientX - startXRef.current);\n const clampedWidth = Math.min(Math.max(newWidth, minWidth), maxWidth);\n document.documentElement.style.setProperty(\"--sidebar-width\", `${clampedWidth}px`);\n };\n\n const handleMouseUp = () => {\n if (!isResizingRef.current) {\n return;\n }\n isResizingRef.current = false;\n document.body.style.cursor = \"\";\n document.body.style.userSelect = \"\";\n };\n\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n document.body.style.cursor = \"\";\n document.body.style.userSelect = \"\";\n };\n }, [defaultWidth, minWidth, maxWidth]);\n\n return {\n handleMouseDown,\n };\n};\n","path":"/use-resizable-sidebar.ts","target":"uicapsule/sidebar/use-resizable-sidebar.ts","type":"registry:file"}],"homepage":"https://www.uicapsule.com/ui/sidebar","name":"sidebar","registryDependencies":[],"title":"Resizable Sidebar","type":"registry:block"}