{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-3-retro",
  "title": "Navbar 3Retro",
  "dependencies": [
    "lucide-react",
    "next"
  ],
  "files": [
    {
      "path": "src/registry/navbars/retro/Navbar3Retro.jsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Menu, X } from \"lucide-react\";\nimport Link from \"next/link\";\n\nconst MenuItem = ({ label, href }) => {\n  return (\n    <Link className=\"relative group block\" href={href}>\n      <span className=\"block px-3 py-1 border-[2px] border-transparent group-hover:bg-black group-hover:text-white group-hover:border-black transition-all duration-200\">\n        {label}\n      </span>\n    </Link>\n  );\n};\n\nconst MobileMenuItem = ({ label, href, activeView }) => {\n  return (\n    <Link className=\"relative group block w-full border-b-[2px] border-black py-4 hover:bg-black hover:text-white transition-colors duration-200 px-4\" href={href}>\n       <div className=\"flex items-center gap-4\">\n          <div className={`w-4 h-4 border-[2px] border-current ${activeView === href ? \"bg-current\" : \"\"}`}></div>\n          <span className=\"text-xl md:text-3xl font-bold uppercase tracking-wider\">{label}</span>\n       </div>\n    </Link>\n  );\n};\n\nexport function NavbarRetro() {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(false);\n  const [activeView, setActiveView] = useState(\"/components/navbars\");\n\n  const menuItems = [\n    { label: \"Navbars\", href: \"/components/navbars\" },\n    { label: \"Loaders\", href: \"/components/loaders\" },\n    { label: \"Lists\", href: \"/components/lists\" },\n  ];\n\n  return (\n    <div className=\"flex justify-center items-center absolute top-0 left-0 w-full z-10 font-mono text-black\">\n      <div className=\"mx-7 my-4 w-full flex items-center justify-between h-full relative\">\n        <button\n          onClick={() => setIsSidebarOpen(!isSidebarOpen)}\n          className=\"nav-left px-3 py-1 border-[2px] border-black bg-white hover:bg-black hover:text-white cursor-pointer transition-colors\"\n        >\n          <div className=\"flex items-center gap-2 font-bold uppercase\">\n            <Menu strokeWidth={3} className=\"w-5 h-5\" />\n            <span className=\"hidden md:inline\">Menu</span>\n          </div>\n        </button>\n        \n        <div className=\"nav-middle md:flex flex-1 justify-center items-center border-[2px] border-black bg-white px-3 mx-4 py-2 gap-3 uppercase text-xs font-bold hidden shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]\">\n          {menuItems.map((item, index) => (\n            <MenuItem key={index} label={item.label} href={item.href} />\n          ))}\n        </div>\n\n        <button className=\"nav-right border-[2px] border-black bg-white hover:bg-black hover:text-white text-black transition-all duration-200 px-6 py-1 cursor-pointer font-bold uppercase shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none\">\n          Login\n        </button>\n      </div>\n\n      <div\n        className={`nav-mobile ${\n          isSidebarOpen ? \"w-full md:w-2/3 xl:w-1/2 opacity-100\" : \"w-0 opacity-0\"\n        } transition-all duration-300 absolute top-0 left-0 overflow-hidden z-20 h-[70vh] bg-white border-r-[2px] border-b-[2px] border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]`}\n      >\n        <div className=\"w-full h-full flex flex-col\">\n          <div className=\"flex justify-between items-center p-6 border-b-[2px] border-black bg-white\">\n             <span className=\"text-2xl font-bold uppercase tracking-widest\">PIXELFLOW_UI</span>\n             <button\n                onClick={() => setIsSidebarOpen(!isSidebarOpen)}\n                className=\"p-2 border-[2px] border-black hover:bg-black hover:text-white transition-colors\"\n              >\n                <X strokeWidth={3} />\n              </button>\n          </div>\n          \n          <div className=\"flex-1 overflow-y-auto bg-white\">\n            {menuItems.map((item, index) => (\n              <MobileMenuItem\n                key={index}\n                label={item.label}\n                href={item.href}\n                activeView={activeView}\n              />\n            ))}\n          </div>\n\n          <div className=\"p-6 border-t-[2px] border-black bg-gray-100\">\n             <p className=\"text-xs uppercase font-bold text-center\">© 2025 PIXELFLOW UI RETRO SYSTEM</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default NavbarRetro;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}