{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "help-center-sidebar",
  "title": "Help Center Sidebar",
  "description": "Collapsible docs sidebar with category icons, active indicators, and mobile drawer.",
  "dependencies": [
    "next-themes"
  ],
  "files": [
    {
      "path": "registry/helpbase/components/docs-sidebar.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport { cn } from \"@/lib/utils\"\nimport type { Category } from \"@/lib/types\"\n\ninterface DocsSidebarProps {\n  categories: Category[]\n}\n\nexport function DocsSidebar({ categories }: DocsSidebarProps) {\n  const pathname = usePathname()\n\n  return (\n    <nav className=\"space-y-1\">\n      {categories.map((category, index) => (\n        <SidebarSection\n          key={category.slug}\n          category={category}\n          pathname={pathname}\n          isLast={index === categories.length - 1}\n        />\n      ))}\n    </nav>\n  )\n}\n\nfunction SidebarSection({\n  category,\n  pathname,\n  isLast,\n}: {\n  category: Category\n  pathname: string\n  isLast: boolean\n}) {\n  const isCategoryActive = pathname.startsWith(`/${category.slug}`)\n  const [isOpen, setIsOpen] = useState<boolean>(true)\n\n  return (\n    <div className={cn(!isLast && \"pb-4\")}>\n      {/* Category header with toggle */}\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen((prev) => !prev)}\n        className={cn(\n          \"group flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm font-medium transition-colors duration-150 ease-out hover:bg-muted/60\",\n          isCategoryActive ? \"text-foreground\" : \"text-muted-foreground\"\n        )}\n      >\n        <span className=\"flex items-center gap-2\">\n          <CategoryIcon slug={category.slug} />\n          {category.title}\n        </span>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={cn(\n            \"size-3.5 text-muted-foreground/50 transition-transform duration-200\",\n            isOpen && \"rotate-90\"\n          )}\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      </button>\n\n      {/* Article list */}\n      {isOpen && category.articles.length > 0 && (\n        <ul className=\"mt-1 space-y-0.5 pl-2\">\n          {category.articles.map((article) => {\n            const articlePath = `/${category.slug}/${article.slug}`\n            const isActive = pathname === articlePath\n\n            return (\n              <li key={article.slug}>\n                <Link\n                  href={articlePath}\n                  className={cn(\n                    \"flex items-center gap-2 rounded-md px-2 py-1.5 text-[13px] transition-colors duration-150 ease-out\",\n                    isActive\n                      ? \"bg-muted font-medium text-foreground\"\n                      : \"text-muted-foreground hover:bg-muted/40 hover:text-foreground\"\n                  )}\n                >\n                  {isActive && (\n                    <span className=\"h-1.5 w-1.5 shrink-0 rounded-full bg-foreground\" />\n                  )}\n                  <span className={cn(!isActive && \"pl-[14px]\")}>\n                    {article.title}\n                  </span>\n                </Link>\n              </li>\n            )\n          })}\n        </ul>\n      )}\n\n      {/* Section separator */}\n      {!isLast && (\n        <div className=\"mt-4 border-b border-border/50\" />\n      )}\n    </div>\n  )\n}\n\nfunction CategoryIcon({ slug }: { slug: string }) {\n  const iconClass = \"size-4 shrink-0\"\n\n  switch (slug) {\n    case \"getting-started\":\n      return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={iconClass}>\n          <path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\" />\n        </svg>\n      )\n    case \"customization\":\n      return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={iconClass}>\n          <path d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n          <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n          <path d=\"M12 2v2\" /><path d=\"M12 22v-2\" />\n          <path d=\"m17 20.66-1-1.73\" /><path d=\"M11 10.27 7 3.34\" />\n          <path d=\"m20.66 17-1.73-1\" /><path d=\"m3.34 7 1.73 1\" />\n          <path d=\"M14 12h8\" /><path d=\"M2 12h2\" />\n          <path d=\"m20.66 7-1.73 1\" /><path d=\"m3.34 17 1.73-1\" />\n          <path d=\"m17 3.34-1 1.73\" /><path d=\"m11 13.73-4 6.93\" />\n        </svg>\n      )\n    case \"reference\":\n      return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={iconClass}>\n          <path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\" />\n        </svg>\n      )\n    case \"cli\":\n      return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={iconClass}>\n          <polyline points=\"4 17 10 11 4 5\" />\n          <line x1=\"12\" x2=\"20\" y1=\"19\" y2=\"19\" />\n        </svg>\n      )\n    case \"guides\":\n      return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={iconClass}>\n          <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n          <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n        </svg>\n      )\n    default:\n      return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={iconClass}>\n          <path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\" />\n        </svg>\n      )\n  }\n}\n",
      "type": "registry:component",
      "target": "components/docs-sidebar.tsx"
    },
    {
      "path": "registry/helpbase/components/mobile-sidebar.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { usePathname } from \"next/navigation\"\nimport { useEffect } from \"react\"\nimport { DocsSidebar } from \"@/components/docs-sidebar\"\nimport type { Category } from \"@/lib/types\"\n\ninterface MobileSidebarProps {\n  categories: Category[]\n}\n\nexport function MobileSidebar({ categories }: MobileSidebarProps) {\n  const [open, setOpen] = useState(false)\n  const pathname = usePathname()\n\n  // Close on navigation\n  useEffect(() => {\n    setOpen(false)\n  }, [pathname])\n\n  return (\n    <>\n      {/* Floating trigger button */}\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"fixed bottom-6 left-6 z-40 flex size-12 items-center justify-center rounded-full bg-foreground text-background shadow-lg transition-transform duration-150 ease-out active:scale-[0.97] lg:hidden\"\n        aria-label=\"Open navigation\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"size-5\">\n          <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\n          <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\n          <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      {/* Overlay + Drawer */}\n      {open && (\n        <>\n          <div\n            className=\"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm lg:hidden\"\n            onClick={() => setOpen(false)}\n          />\n          <div className=\"fixed inset-y-0 left-0 z-50 w-72 bg-background shadow-xl lg:hidden\">\n            <div className=\"flex h-14 items-center justify-between border-b border-border/50 px-4\">\n              <span className=\"text-sm font-semibold\">Navigation</span>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground\"\n                aria-label=\"Close navigation\"\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"size-4\">\n                  <path d=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </button>\n            </div>\n            <div className=\"overflow-y-auto px-4 py-6\" style={{ height: \"calc(100% - 3.5rem)\" }}>\n              <DocsSidebar categories={categories} />\n            </div>\n          </div>\n        </>\n      )}\n    </>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/mobile-sidebar.tsx"
    }
  ],
  "type": "registry:component"
}