{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "title": "Sidebar",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "A dashboard sidebar for light and dark mode: brand header, titled groups, counts and external links.",
  "files": [
    {
      "path": "registry/dashboard/components/sidebar/sidebar.tsx",
      "content": "import { cn } from '@/lib/utils'\n\nexport function Sidebar({ className, ...props }: React.ComponentProps<'aside'>) {\n  return (\n    <aside\n      className={cn(\n        'flex w-60 shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarHeader({\n  logo,\n  title,\n  subtitle,\n  href,\n  className,\n}: {\n  logo?: React.ReactNode\n  title: React.ReactNode\n  subtitle?: React.ReactNode\n  href?: string\n  className?: string\n}) {\n  const Tag = href ? 'a' : 'div'\n  return (\n    <Tag\n      href={href}\n      className={cn(\n        'flex shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar-accent p-3',\n        className,\n      )}\n    >\n      {logo && <span className=\"flex size-8 shrink-0 items-center justify-center\">{logo}</span>}\n      <span className=\"flex min-w-0 flex-col gap-1\">\n        <span className=\"truncate text-sm leading-none font-medium text-sidebar-accent-foreground\">\n          {title}\n        </span>\n        {subtitle && <span className=\"truncate text-xs leading-none\">{subtitle}</span>}\n      </span>\n    </Tag>\n  )\n}\n\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'nav'>) {\n  return (\n    <nav\n      className={cn(\n        'min-h-0 flex-1 overflow-y-auto [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-sidebar-border',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarGroup({\n  title,\n  action,\n  className,\n  children,\n}: {\n  title?: React.ReactNode\n  action?: React.ReactNode\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <div className={cn('flex flex-col gap-1 p-3', className)}>\n      {title && (\n        <div className=\"flex items-center justify-between px-2 py-1\">\n          <span className=\"text-xs leading-none font-semibold tracking-wide text-sidebar-foreground uppercase\">\n            {title}\n          </span>\n          {action}\n        </div>\n      )}\n      <ul className=\"flex flex-col gap-px\">{children}</ul>\n    </div>\n  )\n}\n\nexport function SidebarItem({\n  as,\n  href,\n  icon,\n  count,\n  active = false,\n  external = false,\n  submenu,\n  className,\n  children,\n  ...props\n}: {\n  as?: React.ElementType\n  href?: string\n  icon?: React.ReactNode\n  count?: number\n  active?: boolean\n  external?: boolean\n  submenu?: React.ReactNode\n} & React.HTMLAttributes<HTMLElement>) {\n  const Tag = as ?? (href ? 'a' : 'button')\n\n  return (\n    <li>\n      <Tag\n        href={href}\n        type={Tag === 'button' ? 'button' : undefined}\n        data-active={active}\n        aria-current={active ? 'page' : undefined}\n        {...(external && { target: '_blank', rel: 'noreferrer' })}\n        className={cn(\n          'group flex h-8 w-full items-center gap-2 rounded-lg px-2 text-left text-sm transition-colors duration-150 outline-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground [&_svg]:size-4 [&_svg]:shrink-0',\n          className,\n        )}\n        {...props}\n      >\n        {icon && (\n          <span className=\"flex opacity-80 group-hover:text-sidebar-accent-foreground group-data-[active=true]:text-sidebar-primary-foreground\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n        {count !== undefined && (\n          <span className=\"inline-flex h-4 min-w-6 items-center justify-center rounded-full border border-sidebar-border bg-sidebar-accent px-1 text-[11px] tabular-nums\">\n            {count}\n          </span>\n        )}\n        {external && (\n          <span aria-hidden className=\"opacity-60\">\n            ↗\n          </span>\n        )}\n      </Tag>\n      {submenu && <ul className=\"mt-px flex flex-col gap-px pl-6\">{submenu}</ul>}\n    </li>\n  )\n}\n\nexport function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn('flex shrink-0 flex-col gap-px border-t border-sidebar-border p-3', className)}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/sidebar.tsx"
    }
  ],
  "meta": {
    "scenario": "dashboard",
    "kind": "components"
  },
  "categories": [
    "dashboard",
    "navigation",
    "layout"
  ],
  "type": "registry:component"
}