97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
"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 Image from "next/image";
|
|
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;
|