Navbar 3Lyra

1"use client";
2 
3import React, { useState } from 'react'
4import Link from 'next/link'
5import { Menu, X } from 'lucide-react'
6 
7const MenuItem = ({ label, href }) => {
8	return (
9		<Link className=" relative group " href={href}>
10			<span className="group-hover:text-black transition-all duration-300 text-white z-20 relative" >{label}</span>
11			<div className="w-0 h-full absolute top-0 right-0 bg-white transition-all duration-300 group-hover:w-full group-hover:left-0 z-10">
12			</div>
13		</Link>
14	)
15}
16 
17const MobileMenuItem = ({ label, href, activeView }) => {
18	return (
19		<Link className={`relative group overflow-hidden`} href={href}>
20			<div className={`group-hover:text-black transition-all duration-300 z-20 relative pe-5 ${activeView === href ? "bg-white text-black px-3 translate-x-0" : "text-white -translate-x-5"} overflow-hidden flex items-center gap-2`} >
21				<div className={`w-3 h-3 bg-black rotate-45 `}></div>
22				<span >{label}</span>
23			</div>
24			<div className={`w-0 h-full absolute top-0 right-0 bg-white transition-all duration-300 ${activeView !== href ? "group-hover:w-full" : ""} group-hover:left-0 z-10`}>
25			</div>
26			{
27				activeView === href && (
28					<div className="absolute w-[1vw] h-[1vw] rotate-45 bg-black z-20 -bottom-[0.5vw] -right-[0.5vw] ">
29					</div>
30				)
31			}
32 
33		</Link>
34	)
35}
36 
37const Navbar = () => {
38	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
39	const [activeView, setActiveView] = useState("/");
40 
41	const menuItems = [
42		{
43			label: "Home",
44			href: "/",
45		},
46		{
47			label: "About",
48			href: "/about",
49		},
50 
51		{
52			label: "Contact",
53			href: "/contact",
54		},
55	]
56 
57	return (
58		<>
59			<div className="flex justify-center items-center absolute top-0 left-0 w-full z-10">
60 
61				<div
62					className="mx-7 my-4 w-full flex items-center justify-between h-full relative"
63				>
64					<button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="nav-left px-3 py-1 border-[0.6px] border-gray-300 hover:border-white cursor-pointer">
65						<div className="flex items-center gap-2">
66							<Menu strokeWidth={1} color="white" />
67						</div>
68					</button>
69					<div className="nav-middle md:flex flex-1 justify-center items-center border-t border-b border-gray-300 px-3 py-2 gap-3 uppercase text-xs hidden">
70						{menuItems.map((item, index) => (
71							<MenuItem key={index} label={item.label} href={item.href} />
72						))}
73					</div>
74// … truncated