{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-3-nova",
  "title": "Navbar 3Nova",
  "dependencies": [
    "lucide-react",
    "next"
  ],
  "files": [
    {
      "path": "src/registry/navbars/nova/Navbar3Nova.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 \" href={href}>\n      <span className=\"group-hover:text-white transition-all duration-300 text-neutral-700 font-semibold z-20 relative px-3 py-1\">\n        {label}\n      </span>\n      <div className=\"w-0 h-full absolute top-0 right-0 bg-black transition-all duration-300 group-hover:w-full group-hover:left-0 z-10 rounded-full\"></div>\n    </Link>\n  );\n};\n\nconst MobileMenuItem = ({ label, href, activeView }) => {\n  return (\n    <Link className=\"relative group overflow-hidden block w-full\" href={href}>\n      <div\n        className={`transition-all duration-500 z-20 relative px-4 py-3 ${\n          activeView === href\n            ? \"translate-x-4 bg-neutral-100\"\n            : \"group-hover:translate-x-4 group-hover:bg-neutral-50\"\n        } flex items-center gap-4 rounded-full`}\n      >\n        <div\n          className={`w-3 h-3 rounded-full transition-all duration-300 ${\n            activeView === href\n              ? \"bg-black scale-100\"\n              : \"bg-neutral-400 scale-0 group-hover:scale-100\"\n          }`}\n        />\n        <span\n          className={`font-bold tracking-tight transition-colors duration-300 ${\n            activeView === href\n              ? \"text-black\"\n              : \"text-neutral-500 group-hover:text-black\"\n          }`}\n        >\n          {label}\n        </span>\n      </div>\n    </Link>\n  );\n};\n\nexport default function Navbar() {\n  const [isSidebarOpen, setIsSidebarOpen] = useState(false);\n  const [activeView, setActiveView] = useState(\"/\");\n\n  const menuItems = [\n    {\n      label: \"Navbars\",\n      href: \"/components/navbars\",\n    },\n    {\n      label: \"Loaders\",\n      href: \"/components/loaders\",\n    },\n    {\n      label: \"Lists\",\n      href: \"/components/lists\",\n    },\n  ];\n\n  return (\n    <div className=\"flex justify-center items-center absolute top-0 left-0 w-full z-10\">\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-[0.6px] border-neutral-300 hover:border-black cursor-pointer rounded-full bg-white text-black\"\n        >\n          <div className=\"flex items-center gap-2\">\n            <Menu strokeWidth={1} color=\"black\" />\n          </div>\n        </button>\n        <div className=\"nav-middle md:flex flex-1 justify-center items-center border-t border-b border-neutral-200 px-3 py-2 gap-4 uppercase text-xs hidden bg-white shadow-sm rounded-full mx-4\">\n          {menuItems.map((item, index) => (\n            <MenuItem key={index} label={item.label} href={item.href} />\n          ))}\n        </div>\n        <button className=\"nav-right border-[0.6px] border-neutral-300 bg-black hover:bg-neutral-800 hover:text-white text-white transition-all duration-300 px-3 py-1 cursor-pointer rounded-full\">\n          Login\n        </button>\n      </div>\n\n      <div\n        className={`nav-mobile ${\n          isSidebarOpen\n            ? \"w-full opacity-100\"\n            : \"w-full opacity-0 pointer-events-none\"\n        } transition-all duration-300 absolute top-0 left-0 overflow-hidden z-20 h-screen`}\n      >\n        <div className={`absolute inset-0 bg-white/30 backdrop-blur-md transition-opacity duration-300 ${isSidebarOpen ? 'opacity-100' : 'opacity-0'}`}></div>\n        <div className={`relative w-full h-[70vh] md:w-2/3 xl:w-1/2`}>\n          <div className=\"w-full h-full px-7 py-4\">\n            <div className={`nav-mobile-content grid grid-cols-12 gap-2 justify-center bg-white h-full rounded-xl rounded-tl-none border-[0.6px] border-neutral-300 shadow-xl transition-transform duration-300 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>\n              <div className=\"col-span-1 hidden md:block\"></div>\n              <div className=\"nav-mobile-content-item flex flex-col gap-6 text-black text-3xl md:text-5xl uppercase w-fit h-full col-span-11 md:col-span-9 p-6 overflow-hidden \">\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              <div className=\"flex justify-end col-span-2 md:col-span-2\">\n                <div className=\"border-s-[0.6px] border-neutral-300\">\n                  <div className=\"border-b-[0.6px] border-neutral-300\">\n                    <button\n                      onClick={() => setIsSidebarOpen(!isSidebarOpen)}\n                      className=\"nav-mobile-close h-fit cursor-pointer p-4 hover:rotate-180 transition-all duration-300\"\n                    >\n                      <X color=\"black\" />\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}