Navbar 4

1"use client";
2 
3import React, { useCallback, useState, useRef, useEffect } 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 
21const 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 handleScroll = useCallback(
51    (e) => {
52      if (isNav) {
53        e.preventDefault();
54        e.stopPropagation();
55      }
56    },
57    [isNav]
58  );
59 
60  const handlePillStyle = useCallback((index) => {
61    if (!refs.current[index]) return;
62    const rect = refs.current[index].getBoundingClientRect();
63    const navRect = navbarRef.current.getBoundingClientRect();
64 
65    setActivePillStyle({
66      width: rect.width,
67      left: rect.left - navRect.left - 8,
68    });
69  }, []);
70 
71  const resetPillStyle = useCallback(() => {
72    setActivePillStyle({ width: 0, left: 0 });
73  }, []);
74 
75  useEffect(() => {}, []);
76 
77  return (
78    <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]">
79      <div className="px-5 md:px-12 py-5 flex items-center gap-4 justify-between w-full z-20">
80        <Link
81          href="/components/navbars"
82          className="nav-left text-black bg-white rounded-full px-4 py-2 font-bold text-sm md:text-xl z-20 whitespace-nowrap"
83        >
84          PIXELFLOW UI
85        </Link>
86 
87        <div
88          ref={navbarRef}
89          className=" z-50 border-white/50 border-[0.6px] rounded-full p-1 md:p-2 flex items-center gap-2"
90        >
91          <div className="relative flex items-center gap-2 md:gap-4">
92            <div
93// … truncated