{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-demo",
  "title": "Navbar Demo",
  "description": "component for the Navbar Demo",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "scroll-area",
    "sheet"
  ],
  "files": [
    {
      "path": "app/registry/navbar/navbardemo.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Sheet, SheetContent, SheetTrigger } from \"@/components/ui/sheet\";\nimport { Home, Menu, MessageSquare, Settings, Users } from \"lucide-react\";\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/components/ui/resizable\";\n\nexport default function Navbardemo() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"flex \">\n      <Sheet open={open} onOpenChange={setOpen}>\n        <SheetTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"fixed left-4 top-4 lg:hidden\"\n          >\n            <Menu className=\"h-6 w-6\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\" className=\"w-[240px] p-0\">\n          <VerticalNav />\n        </SheetContent>\n      </Sheet>\n      <ResizablePanelGroup\n        direction=\"horizontal\"\n        className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n      >\n        <ResizablePanel defaultSize={70}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <VerticalNav />\n          </div>\n        </ResizablePanel>\n        <ResizableHandle withHandle />\n        <ResizablePanel defaultSize={85}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </div>\n  );\n}\n\nfunction VerticalNav() {\n  return (\n    <ScrollArea className=\"h-full py-6\">\n      <div className=\"px-3 py-2\">\n        <h2 className=\"mb-2 px-4 text-lg font-semibold\">Dashboard</h2>\n        <div className=\"space-y-1\">\n          <Button variant=\"ghost\" className=\"w-full justify-start\">\n            <Home className=\"mr-2 h-4 w-4\" />\n            Home\n          </Button>\n          <Button variant=\"ghost\" className=\"w-full justify-start\">\n            <Users className=\"mr-2 h-4 w-4\" />\n            Team\n          </Button>\n          <Button variant=\"ghost\" className=\"w-full justify-start\">\n            <MessageSquare className=\"mr-2 h-4 w-4\" />\n            Messages\n          </Button>\n          <Button variant=\"ghost\" className=\"w-full justify-start\">\n            <Settings className=\"mr-2 h-4 w-4\" />\n            Settings\n          </Button>\n        </div>\n      </div>\n    </ScrollArea>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/navbar.tsx"
    }
  ],
  "type": "registry:component"
}