Navbar 3Retro

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 block" href={href}>
10      <span className="block px-3 py-1 border-[2px] border-transparent group-hover:bg-black group-hover:text-white group-hover:border-black transition-all duration-200">
11        {label}
12      </span>
13    </Link>
14  );
15};
16 
17const MobileMenuItem = ({ label, href, activeView }) => {
18  return (
19    <Link className="relative group block w-full border-b-[2px] border-black py-4 hover:bg-black hover:text-white transition-colors duration-200 px-4" href={href}>
20       <div className="flex items-center gap-4">
21          <div className={`w-4 h-4 border-[2px] border-current ${activeView === href ? "bg-current" : ""}`}></div>
22          <span className="text-xl md:text-3xl font-bold uppercase tracking-wider">{label}</span>
23       </div>
24    </Link>
25  );
26};
27 
28export function NavbarRetro() {
29  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
30  const [activeView, setActiveView] = useState("/components/navbars");
31 
32  const menuItems = [
33    { label: "Navbars", href: "/components/navbars" },
34    { label: "Loaders", href: "/components/loaders" },
35    { label: "Lists", href: "/components/lists" },
36  ];
37 
38  return (
39    <div className="flex justify-center items-center absolute top-0 left-0 w-full z-10 font-mono text-black">
40      <div className="mx-7 my-4 w-full flex items-center justify-between h-full relative">
41        <button
42          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
43          className="nav-left px-3 py-1 border-[2px] border-black bg-white hover:bg-black hover:text-white cursor-pointer transition-colors"
44        >
45          <div className="flex items-center gap-2 font-bold uppercase">
46            <Menu strokeWidth={3} className="w-5 h-5" />
47            <span className="hidden md:inline">Menu</span>
48          </div>
49        </button>
50        
51        <div className="nav-middle md:flex flex-1 justify-center items-center border-[2px] border-black bg-white px-3 mx-4 py-2 gap-3 uppercase text-xs font-bold hidden shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
52          {menuItems.map((item, index) => (
53            <MenuItem key={index} label={item.label} href={item.href} />
54          ))}
55        </div>
56 
57// … truncated