{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-4",
  "title": "Navbar 4",
  "dependencies": [
    "@gsap/react",
    "gsap",
    "next",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/navbars/nova/Navbar4.jsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useState, useRef, useEffect } from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { Draggable, InertiaPlugin } from \"gsap/all\";\nimport Link from \"next/link\";\nimport { Menu } from \"lucide-react\";\n\nconst navItems = [\n  {\n    label: \"Lets work\",\n    href: \"/components/navbars\",\n  },\n  {\n    label: \"Contact\",\n    href: \"/components/navbars\",\n  },\n];\n\nconst Navbar = () => {\n  gsap.registerPlugin(Draggable, InertiaPlugin);\n\n  const LOGO_TEXT = \"PIXELFLOWUI\";\n  const [isNav, setIsNav] = useState(false);\n  const refs = useRef([]);\n  const [activePillStyle, setActivePillStyle] = useState({ width: 0, left: 0 });\n  const navbarRef = useRef(null);\n\n  const toggleNav = useCallback(() => {\n    setIsNav((prev) => !prev);\n  }, []);\n\n  useGSAP(() => {\n    const draggables = [];\n    LOGO_TEXT.split(\"\").forEach((_item, index) => {\n      draggables.push(\n        Draggable.create(`.logo-${index}`, {\n          bounds: \".nav-wrapper\",\n          inertia: true,\n        })[0]\n      );\n    });\n\n    return () => {\n      draggables.forEach((d) => d && d.kill());\n    };\n  }, [isNav]);\n\n  const handleScroll = useCallback(\n    (e) => {\n      if (isNav) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    },\n    [isNav]\n  );\n\n  const handlePillStyle = useCallback((index) => {\n    if (!refs.current[index]) return;\n    const rect = refs.current[index].getBoundingClientRect();\n    const navRect = navbarRef.current.getBoundingClientRect();\n\n    setActivePillStyle({\n      width: rect.width,\n      left: rect.left - navRect.left - 8,\n    });\n  }, []);\n\n  const resetPillStyle = useCallback(() => {\n    setActivePillStyle({ width: 0, left: 0 });\n  }, []);\n\n  useEffect(() => {}, []);\n\n  return (\n    <nav className=\"w-full flex justify-center items-center absolute top-0 z-30 left-0 navbar-wrapper bg-black border-b-[0.6px] border-white/40 h-[100vh]\">\n      <div className=\"px-5 md:px-12 py-5 flex items-center gap-4 justify-between w-full z-20\">\n        <Link\n          href=\"/components/navbars\"\n          className=\"nav-left text-black bg-white rounded-full px-4 py-2 font-bold text-sm md:text-xl z-20 whitespace-nowrap\"\n        >\n          PIXELFLOW UI\n        </Link>\n\n        <div\n          ref={navbarRef}\n          className=\" z-50 border-white/50 border-[0.6px] rounded-full p-1 md:p-2 flex items-center gap-2\"\n        >\n          <div className=\"relative flex items-center gap-2 md:gap-4\">\n            <div\n              style={{\n                width: `${activePillStyle.width}px`,\n                left: `${activePillStyle.left}px`,\n                opacity: activePillStyle.width > 0 ? 1 : 0,\n              }}\n              className=\"absolute pill-bg h-full rounded-full z-20 transition-all duration-500 bg-blue-200 cursor-pointer pointer-events-none\"\n            />\n\n            <div className=\"hidden md:flex items-center gap-2\">\n              {navItems.map((item, index) => (\n                <Link\n                  ref={(navItem) => (refs.current[index] = navItem)}\n                  key={index}\n                  href={item.href}\n                  className=\" text-white rounded-full px-5 py-1 cursor-pointer z-30 hover:text-blue-800 transition-all duration-500 relative\"\n                  onMouseEnter={() => handlePillStyle(index)}\n                  onMouseLeave={resetPillStyle}\n                >\n                  {item.label}\n                </Link>\n              ))}\n            </div>\n\n            <div\n              onClick={() => toggleNav()}\n              className=\"flex cursor-pointer w-8 h-8 transition-all duration-300 bg-white p-2 rounded-full hover:scale-125 z-30 items-center justify-center text-black\"\n            >\n              <Menu strokeWidth={2} className=\"w-5 h-5 md:w-6 md:h-6\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div\n        style={{ height: `${isNav ? \"100vh\" : \"0%\"}` }}\n        className=\" bg-white w-full ease-in absolute top-0 left-0 nav-bg z-30 overflow-hidden transition-all duration-1000 flex flex-col \"\n        onWheel={handleScroll}\n        onTouchMove={handleScroll}\n        onScroll={handleScroll}\n      >\n        <div className=\" w-full h-full flex flex-col bg-white overflow-hidden relative\">\n          <div className=\"w-full h-[80px] md:h-[100px] flex items-center justify-between px-5 md:px-12 py-5 shrink-0\">\n            <div className=\"nav-left text-white bg-black rounded-full px-4 py-2 font-bold text-sm md:text-xl z-40\">\n              PIXELFLOW UI\n            </div>\n\n            <div className=\" z-50 p-2 flex items-center justify-end\">\n              <div\n                onClick={() => toggleNav()}\n                className=\"flex origin-center bg-black w-8 h-8 md:w-10 md:h-10 transition-all duration-300 justify-center items-center rounded-full cursor-pointer hover:scale-110 z-50\"\n              >\n                <Menu strokeWidth={2} size={20} className=\"text-white\" />\n              </div>\n            </div>\n          </div>\n\n          <div className=\"relative w-full flex flex-col md:grid md:grid-cols-2 px-5 md:px-12 pb-12 pt-4 flex-1 nav-wrapper overflow-hidden\">\n            <div className=\"w-full flex flex-col justify-start md:justify-end gap-6 z-40 order-2 md:order-1 mt-10 md:mt-0\">\n              <div className=\"space-y-4 flex flex-col text-3xl md:text-4xl\">\n                {[\n                  { label: \"Work\", href: \"#\" },\n                  { label: \"Services\", href: \"#\" },\n                  { label: \"About\", href: \"#\" },\n                ].map((item, index) => (\n                  <button\n                    key={index}\n                    className=\"text-left relative group w-fit\"\n                  >\n                    <p className=\"capitalize text-black font-bold\">\n                      {item.label}\n                    </p>\n                    <div className=\"absolute group-hover:w-full group-hover:left-0 right-0 w-0 h-[2px] bg-black transition-all duration-300\" />\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"right w-full flex items-center md:items-end justify-center md:justify-end h-[200px] md:h-full relative order-1 md:order-2\">\n              <div className=\" flex flex-col justify-center gap-2 text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-black relative select-none\">\n                <div className=\"flex gap-1 md:gap-2 flex-wrap md:flex-nowrap justify-center md:justify-end\">\n                  {Array.from({\n                    length: LOGO_TEXT.length,\n                  }).map((_, index) => (\n                    <div\n                      key={index}\n                      className={\"logo-\" + index + \" cursor-grab active:cursor-grabbing inline-block\"}\n                    >\n                      {LOGO_TEXT[index]}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </nav>\n  );\n};\n\nexport default Navbar\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}