drfeely.com/components/Navbar/index.tsx

"use client";

import { useEffect, useState } from "react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
import NavPages from "./NavPages";
import logo from "@/public/content/logo.png";
import logo_small from "@/public/content/logo_small.png";
import { default as Image } from "next-image-export-optimizer";
import { usePathname } from "next/navigation";

const Navbar = () => {
  const [isTopOfPage, setIsTopOfPage] = useState(true);
  const [menuActive, setMenuActive] = useState(false);

  const currentPage = "/" + usePathname().split("/")[1];

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY === 0) {
        setIsTopOfPage(true);
      } else {
        setIsTopOfPage(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const useSmallNav: boolean = isTopOfPage && currentPage === "/";

  return (
    <nav
      className={
        "fixed top-0 z-40 w-full bg-primary-500 text-primary-100 transition-all " +
        (useSmallNav
          ? "bg-transparent pt-5 duration-100 md:pt-0"
          : "bg-opacity-75 pt-0 drop-shadow backdrop-blur-sm delay-100 duration-200")
      }
    >
      <div className="mx-auto flex w-11/12 items-center justify-between lg:w-5/6">
        <div className="flex items-center justify-between">
          <Image
            src={useSmallNav ? logo_small : logo_small}
            alt="Feely Center Logo"
            className={
              "drop-shadow-2xl  transition-all duration-300 " +
              (useSmallNav ? "w-24 md:w-44" : "w-16 md:w-24")
            }
          />
          <div
            className={
              "whitespace-nowrap p-5 font-cormorant text-2xl transition-all " +
              (useSmallNav
                ? "w-0 select-none text-transparent duration-100"
                : "delay-100 duration-300")
            }
          >
            Richard A. Feely, DO
          </div>
        </div>

        {/* Burger icon */}
        <div className="w-[30px] text-tertiary-300 md:hidden ">
          <Bars3Icon onClick={() => setMenuActive((e) => !e)}></Bars3Icon>
        </div>
        {/* Burger menu */}
        {menuActive ? (
          <div className="fixed right-0 top-0 z-50 h-screen animate-fadeIn bg-secondary-500 text-lg drop-shadow-lg ">
            <div className="flex flex-col gap-6 px-12 py-5 text-right text-primary-500">
              <div className="flex justify-end pb-3 ">
                <XMarkIcon
                  className="w-[30px]"
                  onClick={() => setMenuActive((e) => !e)}
                ></XMarkIcon>
              </div>
              <NavPages currentPageClasses="text-primary-100"></NavPages>
            </div>
          </div>
        ) : (
          <></>
        )}

        {/* Nav Bar */}
        <div
          className={
            "hidden items-center gap-6 font-abel text-lg text-tertiary-300 transition-all  duration-300 md:flex " +
            (useSmallNav ? "px-5 py-24" : "p-5")
          }
        >
          <NavPages currentPageClasses="text-secondary-500"></NavPages>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;