Navbar 4Retro

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 
10/**
11 * Note: Ensure you have installed gsap: npm install gsap
12 */
13 
14const navItems = [
15  { label: "PROJECTS", href: "#" },
16  { label: "CONTACT", href: "#" },
17];
18 
19export function NavbarRetro() {
20  gsap.registerPlugin(Draggable, InertiaPlugin);
21 
22  const LOGO_TEXT = "PIXELFLOW_UI";
23  const [isNav, setIsNav] = useState(false);
24  const refs = useRef([]);
25  const [activePillStyle, setActivePillStyle] = useState({ width: 0, left: 0 });
26  const navbarRef = useRef(null);
27 
28  const toggleNav = useCallback(() => {
29    setIsNav((prev) => !prev);
30  }, []);
31 
32  useGSAP(() => {
33    const draggables = [];
34    LOGO_TEXT.split("").forEach((_item, index) => {
35      draggables.push(
36        Draggable.create(`.logo-${index}`, {
37          bounds: ".nav-wrapper",
38          inertia: true,
39        })[0]
40      );
41    });
42 
43    return () => {
44      draggables.forEach((d) => d && d.kill());
45    };
46  }, [isNav]);
47 
48  const handlePillStyle = useCallback((index) => {
49    if (!refs.current[index]) return;
50    const rect = refs.current[index].getBoundingClientRect();
51    const navRect = navbarRef.current.getBoundingClientRect();
52 
53    setActivePillStyle({
54      width: rect.width,
55      left: rect.left - navRect.left - 4,
56    });
57  }, []);
58 
59  const resetPillStyle = useCallback(() => {
60    setActivePillStyle({ width: 0, left: 0 });
61  }, []);
62 
63  return (
64    <nav className="w-full flex justify-center items-center absolute top-0 z-30 left-0 navbar-wrapper bg-white border-b-2 border-black font-mono">
65      <div className="px-5 md:px-12 py-5 flex items-center gap-4 justify-between w-full z-20">
66        <Link
67          href="/"
68          className="nav-left text-white bg-black border-2 border-black px-4 py-2 font-bold text-sm md:text-xl z-20 whitespace-nowrap uppercase tracking-wider hover:bg-white hover:text-black transition-colors duration-200"
69        >
70          PIXELFLOW_UI
71        </Link>
72 
73        {/* Right side controls */}
74        <div
75          ref={navbarRef}
76          className="z-50 border-2 border-black p-1 md:p-1 flex items-center gap-2 bg-white"
77        >
78          <div className="relative flex items-center gap-2 md:gap-4">
79            
80            {/* Sliding Block */}
81            <div
82              style={{
83// … truncated