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 Reserve from "./reserveButton";
import "./NavBar.css";
import { GiHamburgerMenu } from "react-icons/gi";
import {
  AiOutlineInstagram,
  AiOutlineFacebook,
  AiOutlineTwitter,
} from "react-icons/ai";
import { FaTiktok } from "react-icons/fa";

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

  const handleNav = () => {
    set_menu_open(!menu_open);
  };

  // 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 xl:p-1 mx-auto bg-transparent md:p-4 absolute z-10 w-full">
        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl: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="100vw"
            style={{ width: "40%", height: "auto" }}
            alt="Logo"
            className="hidden xl: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 xl:text-xl font-sans antialiased md:pl-4">
          {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 md:block absolute overflow-hidden">
          <Reserve />
        </div>
        {/* Header image */}
        {/* <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={menu_open ? "hidden" : ""}>
        {" "}
        <div
          onClick={handleNav}
          className="md:hidden cursor-pointer pl-24 text-white top-3 right-3 absolute"
        >
          <GiHamburgerMenu size={25} />
        </div>
      </div>

      <div className={menu_open ? "" : "hidden"}>
        <div
          onClick={handleNav}
          className="md:hidden cursor-pointer top-3 right-3 absolute z-20 ease-in duration-500"
        >
          <Image src="/fork.svg" width={20} height={20} alt="fork" />
        </div>
      </div>

      <div
        className={
          menu_open
            ? "fixed right-0 top-0 w-[65%] sm:hidden h-screen bg-[#18191a] p-10 ease-in duration-300 z-10"
            : "fixed right-[-100%] top-0 p-10 ease-in duration-500"
        }
      >
        <div className="flex flex-col py-32 w-full items-center justify-center">
          <ul className="hover:cursor-pointer flex flex-col gap-8 items-center justify-center">
            {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
                onClick={() => set_menu_open(false)}
                className={classnames({
                  "border-b-2 border-white text-red-700":
                    link.href === currentPath,
                  "text-red-700": link.href !== currentPath,
                  "hover:text-red-700": true,
                })}
                href={link.href}
              >
                {link.label}
              </Link>
            ))}
          </ul>
          <ul className="hover:cursor-pointer flex flex-col gap-8 items-center justify-center py-8">
            {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
                onClick={() => set_menu_open(false)}
                className={classnames({
                  "border-b-2 border-white text-red-700":
                    link.href === currentPath,
                  "text-red-700": link.href !== currentPath,
                  "hover:text-red-700": true,
                })}
                href={link.href}
              >
                {link.label}
              </Link>
            ))}
          </ul>
        </div>
        <div className="flex flex-row justify-around  items-center text-red-800">
          <FaTiktok size={30} className="cursor-pointer" />
          <AiOutlineInstagram size={30} className="cursor-pointer" />
          <AiOutlineFacebook size={30} className="cursor-pointer" />
        </div>
      </div>
    </nav>
  );
};

export default NavBar;