{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-3-lyra",
  "title": "Navbar 3Lyra",
  "dependencies": [
    "next",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/navbars/lyra/Navbar3Lyra.jsx",
      "content": "\"use client\";\n\nimport React, { useState } from 'react'\nimport Link from 'next/link'\nimport { Menu, X } from 'lucide-react'\n\nconst MenuItem = ({ label, href }) => {\n\treturn (\n\t\t<Link className=\" relative group \" href={href}>\n\t\t\t<span className=\"group-hover:text-black transition-all duration-300 text-white z-20 relative\" >{label}</span>\n\t\t\t<div className=\"w-0 h-full absolute top-0 right-0 bg-white transition-all duration-300 group-hover:w-full group-hover:left-0 z-10\">\n\t\t\t</div>\n\t\t</Link>\n\t)\n}\n\nconst MobileMenuItem = ({ label, href, activeView }) => {\n\treturn (\n\t\t<Link className={`relative group overflow-hidden`} href={href}>\n\t\t\t<div className={`group-hover:text-black transition-all duration-300 z-20 relative pe-5 ${activeView === href ? \"bg-white text-black px-3 translate-x-0\" : \"text-white -translate-x-5\"} overflow-hidden flex items-center gap-2`} >\n\t\t\t\t<div className={`w-3 h-3 bg-black rotate-45 `}></div>\n\t\t\t\t<span >{label}</span>\n\t\t\t</div>\n\t\t\t<div className={`w-0 h-full absolute top-0 right-0 bg-white transition-all duration-300 ${activeView !== href ? \"group-hover:w-full\" : \"\"} group-hover:left-0 z-10`}>\n\t\t\t</div>\n\t\t\t{\n\t\t\t\tactiveView === href && (\n\t\t\t\t\t<div className=\"absolute w-[1vw] h-[1vw] rotate-45 bg-black z-20 -bottom-[0.5vw] -right-[0.5vw] \">\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\n\t\t</Link>\n\t)\n}\n\nconst Navbar = () => {\n\tconst [isSidebarOpen, setIsSidebarOpen] = useState(false);\n\tconst [activeView, setActiveView] = useState(\"/\");\n\n\tconst menuItems = [\n\t\t{\n\t\t\tlabel: \"Home\",\n\t\t\thref: \"/\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"About\",\n\t\t\thref: \"/about\",\n\t\t},\n\n\t\t{\n\t\t\tlabel: \"Contact\",\n\t\t\thref: \"/contact\",\n\t\t},\n\t]\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"flex justify-center items-center absolute top-0 left-0 w-full z-10\">\n\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"mx-7 my-4 w-full flex items-center justify-between h-full relative\"\n\t\t\t\t>\n\t\t\t\t\t<button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className=\"nav-left px-3 py-1 border-[0.6px] border-gray-300 hover:border-white cursor-pointer\">\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<Menu strokeWidth={1} color=\"white\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div className=\"nav-middle md:flex flex-1 justify-center items-center border-t border-b border-gray-300 px-3 py-2 gap-3 uppercase text-xs hidden\">\n\t\t\t\t\t\t{menuItems.map((item, index) => (\n\t\t\t\t\t\t\t<MenuItem key={index} label={item.label} href={item.href} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t<button className=\"nav-right border-[0.6px] border-white bg-gray-300 hover:bg-white hover:text-black text-black transition-all duration-300 px-3 py-1 cursor-pointer\">\n\t\t\t\t\t\tLogin\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\n\t\t\t</div>\n\n\t\t\t<div className={`nav-mobile ${isSidebarOpen ? \"w-full opacity-100\" : \"w-full opacity-0 pointer-events-none\"} transition-all duration-300 absolute top-0 left-0 h-screen overflow-hidden z-20`}>\n\t\t\t\t<div className={`absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isSidebarOpen ? 'opacity-100' : 'opacity-0'}`}></div>\n\t\t\t\t<div className={`relative w-full h-[70vh] md:w-2/3 xl:w-1/2`}>\n\t\t\t\t\t<div className=\"w-full h-full px-7 py-4\">\n\t\t\t\t\t\t<div className={`nav-mobile-content grid grid-cols-12 gap-2 justify-center bg-black h-full rounded-xl rounded-tl-none border-[0.6px] border-white transition-transform duration-300 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>\n\t\t\t\t\t\t\t<div className=\"col-span-2 p-4 hidden md:block\"></div>\n\t\t\t\t\t\t\t<div className=\"nav-mobile-content-item flex flex-col gap-2 text-white text-3xl md:text-5xl uppercase w-fit h-full col-span-10 md:col-span-8 p-4 overflow-hidden\">\n\t\t\t\t\t\t\t\t{menuItems.map((item, index) => (\n\t\t\t\t\t\t\t\t\t<MobileMenuItem key={index} label={item.label} href={item.href} activeView={activeView} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex justify-end col-span-2 md:col-span-2\">\n\t\t\t\t\t\t\t\t<div className=\"border-s-[0.6px] border-white\">\n\t\t\t\t\t\t\t\t\t<div className=\"border-b-[0.6px] border-white\">\n\t\t\t\t\t\t\t\t\t\t<button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className=\"nav-mobile-close h-fit cursor-pointer p-4 hover:rotate-180 transition-all duration-300\">\n\t\t\t\t\t\t\t\t\t\t\t<X />\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t)\n}\n\nexport default Navbar\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}