Navbar 3Nova

1"use client";
2 
3import React, { useState } from "react";
4import { Menu, X } from "lucide-react";
5import Link from "next/link";
6 
7const MenuItem = ({ label, href }) => {
8  return (
9    <Link className=" relative group " href={href}>
10      <span className="group-hover:text-white transition-all duration-300 text-neutral-700 font-semibold z-20 relative px-3 py-1">
11        {label}
12      </span>
13      <div className="w-0 h-full absolute top-0 right-0 bg-black transition-all duration-300 group-hover:w-full group-hover:left-0 z-10 rounded-full"></div>
14    </Link>
15  );
16};
17 
18const MobileMenuItem = ({ label, href, activeView }) => {
19  return (
20    <Link className="relative group overflow-hidden block w-full" href={href}>
21      <div
22        className={`transition-all duration-500 z-20 relative px-4 py-3 ${
23          activeView === href
24            ? "translate-x-4 bg-neutral-100"
25            : "group-hover:translate-x-4 group-hover:bg-neutral-50"
26        } flex items-center gap-4 rounded-full`}
27      >
28        <div
29          className={`w-3 h-3 rounded-full transition-all duration-300 ${
30            activeView === href
31              ? "bg-black scale-100"
32              : "bg-neutral-400 scale-0 group-hover:scale-100"
33          }`}
34        />
35        <span
36          className={`font-bold tracking-tight transition-colors duration-300 ${
37            activeView === href
38              ? "text-black"
39              : "text-neutral-500 group-hover:text-black"
40          }`}
41        >
42          {label}
43        </span>
44      </div>
45    </Link>
46  );
47};
48 
49export default function Navbar() {
50  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
51  const [activeView, setActiveView] = useState("/");
52 
53  const menuItems = [
54    {
55      label: "Navbars",
56      href: "/components/navbars",
57    },
58    {
59      label: "Loaders",
60      href: "/components/loaders",
61    },
62    {
63      label: "Lists",
64      href: "/components/lists",
65    },
66  ];
67 
68  return (
69    <div className="flex justify-center items-center absolute top-0 left-0 w-full z-10">
70      <div className="mx-7 my-4 w-full flex items-center justify-between h-full relative">
71        <button
72          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
73          className="nav-left px-3 py-1 border-[0.6px] border-neutral-300 hover:border-black cursor-pointer rounded-full bg-white text-black"
74        >
75          <div className="flex items-center gap-2">
76            <Menu strokeWidth={1} color="black" />
77          </div>
78        </button>
79// … truncated