Portfolio/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx

"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import classnames from "classnames";
import { GiHamburgerMenu } from "react-icons/gi";
import { MdOutlineRestaurantMenu } from "react-icons/md";
import Reserve from "./reserveButton";
import "./NavBar.css";

const NavBar = () => {
  const currentPath = usePathname();
  console.log(currentPath);
  const [toggle_menu, set_toggle_menu] = useState(false);

  // Create an array to hold the list items
  const links = [
    { label: "HOME", href: "/" },
    { label: "MENU", href: "/menu" },
    { label: "GALLERY", href: "/gallery" },
  ];
  // Create an array to hold the list items
  const links2 = [
    { label: "ABOUT", href: "/about-us" },
    { label: "REVIEWS", href: "/reviews" },
    { label: "CONTACT", href: "/contact" },
    // { label: "Dashboard", href: "/dashboard" },
    // { label: "RESERVE", href: "/reservations" },
    // { label: "Issues", href: "/issues" },
  ];

  return (
    <nav className="">
      {/* <center className="text-accent bg-black">O</center> */}
      <div className="flex items-center justify-center p-2 mx-auto bg-red-800">
        <ul className="hover:cursor-pointer hidden md:block space-x-4 text-xl font-sans antialiased">
          {links.map((link) => (
            <Link
              key={link.href}
              // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
              // replace with classnames object instead
              className={classnames({
                "border-b-2 border-jefesRed text-accent":
                  link.href === currentPath,
                "text-accent": link.href !== currentPath,
                "hover:text-jefesRed": true,
              })}
              href={link.href}
            >
              {link.label}
            </Link>
          ))}
        </ul>
        {/* logo */}
        <Link href="/">
          <Image
            src="/logo.svg"
            width={0}
            height={0}
            sizes="200vw"
            style={{ width: "50%", height: "auto" }}
            alt="Logo"
            className="hidden md:block logo"
          />
          <Image
            src="/logo.svg"
            width={0}
            height={0}
            sizes="50vw"
            style={{ width: "50%", height: "auto" }}
            alt="Logo"
            className="block md:hidden"
          />
        </Link>

        <ul className="hover:cursor-pointer hidden md:block space-x-4 text-xl font-sans antialiased">
          {links2.map((link) => (
            <Link
              key={link.href}
              // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
              // replace with classnames object instead
              className={classnames({
                "border-b-2 border-jefesRed text-accent":
                  link.href === currentPath,
                "text-accent": link.href !== currentPath,
                "hover:text-jefesRed": true,
              })}
              href={link.href}
            >
              {link.label}
            </Link>
          ))}
        </ul>
        {/* Reservation button */}
        <div className="right-2 hidden xl:block absolute overflow-hidden">
          <Reserve />
        </div>
        <div className="overflow-hidden">
          <Image
            src="/header02.webp"
            alt="nav image"
            fill
            style={{ objectFit: "cover" }}
            quality={100}
            className="hidden md:block nav_background"
          />
          <Image
            src="/header02.webp"
            alt="nav image"
            fill
            style={{ objectFit: "cover" }}
            className="block md:hidden nav_background"
          />
        </div>
      </div>
      <div className="block md:hidden">
        <GiHamburgerMenu
          className="text-accent text-4xl space-x-2 absolute top-3 right-3"
          onClick={() => set_toggle_menu(true)}
        />
        {toggle_menu && (
          <div className="navbar_small_screen_overlay flex_center slide_bottom">
            <MdOutlineRestaurantMenu
              fontSize={27}
              className="text-accent absolute top-3 right-3 text-4xl"
              onClick={() => set_toggle_menu(false)}
            />
            <ul className="flex flex-col text-2xl col-auto gap-4 grid-cols-1 table-auto absolute">
              {links.map((link) => (
                <Link
                  key={link.href}
                  // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
                  // replace with classnames object instead
                  className={classnames({
                    "border-b border-jefesRed text-accent":
                      link.href === currentPath,
                    "text-accent": link.href !== currentPath,
                    // "hover:text-jefesRed": true,
                  })}
                  href={link.href}
                >
                  {link.label}
                </Link>
              ))}
            </ul>
          </div>
        )}
      </div>
    </nav>
  );
};

export default NavBar;