Navbar 4Lyra

1"use client";
2 
3import React, { useState, useRef, useEffect, useCallback } from "react";
4import { useGSAP } from "@gsap/react";
5import gsap from "gsap";
6import { Draggable, InertiaPlugin } from "gsap/all";
7import Link from "next/link";
8import { Menu } from "lucide-react";
9 
10const navItems = [
11  {
12    label: "Lets work",
13    href: "/components/navbars",
14  },
15  {
16    label: "Contact",
17    href: "/components/navbars",
18  },
19];
20 
21export default function Navbar() {
22  gsap.registerPlugin(Draggable, InertiaPlugin);
23 
24  const LOGO_TEXT = "PIXELFLOWUI";
25  const [isNav, setIsNav] = useState(false);
26  const refs = useRef([]);
27  const [activePillStyle, setActivePillStyle] = useState({ width: 0, left: 0 });
28  const navbarRef = useRef(null);
29 
30  const toggleNav = useCallback(() => {
31    setIsNav((prev) => !prev);
32  }, []);
33 
34  useGSAP(() => {
35    const draggables = [];
36    LOGO_TEXT.split("").forEach((_item, index) => {
37      draggables.push(
38        Draggable.create(`.logo-${index}`, {
39          bounds: ".nav-wrapper",
40          inertia: true,
41        })[0]
42      );
43    });
44 
45    return () => {
46      draggables.forEach((d) => d && d.kill());
47    };
48  }, [isNav]);
49 
50  const handlePillStyle = useCallback((index) => {
51    if (!refs.current[index]) return;
52    const rect = refs.current[index].getBoundingClientRect();
53    const navRect = navbarRef.current.getBoundingClientRect();
54 
55    setActivePillStyle({
56      width: rect.width,
57      left: rect.left - navRect.left - 8,
58    });
59  }, []);
60 
61  const resetPillStyle = useCallback(() => {
62    setActivePillStyle({ width: 0, left: 0 });
63  }, []);
64 
65  return (
66    <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">
67      <div className="px-5 md:px-12 py-5 flex items-center gap-4 justify-between w-full z-20">
68        <Link
69          href="/components/navbars"
70          className="nav-left text-black bg-white px-4 py-2 font-bold text-sm md:text-xl z-20 whitespace-nowrap uppercase"
71        >
72          PixelFlow <span className="text-gray-500">UI</span>
73        </Link>
74 
75        <div
76          ref={navbarRef}
77          className=" z-50 border-white/50 border-[0.6px] p-1 md:p-2 flex items-center gap-2"
78        >
79          <div className="relative flex items-center gap-2 md:gap-4">
80            <div
81              style={{
82                width: `${activePillStyle.width}px`,
83                left: `${activePillStyle.left}px`,
84// … truncated