86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
|
|
import NavPages from "./NavPages";
|
|
|
|
const Navbar = () => {
|
|
const [currentPage, setCurrentPage] = useState("/");
|
|
const [isTopOfPage, setIsTopOfPage] = useState(true);
|
|
const [menuActive, setMenuActive] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (window.scrollY === 0) {
|
|
setIsTopOfPage(true);
|
|
} else {
|
|
setIsTopOfPage(false);
|
|
}
|
|
};
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<nav
|
|
className={
|
|
"bg-primary-500 text-primary-100 fixed top-0 w-full " +
|
|
(isTopOfPage
|
|
? "bg-transparent"
|
|
: "z-40 bg-opacity-75 backdrop-blur-sm drop-shadow")
|
|
}
|
|
>
|
|
<div className="mx-auto w-11/12 lg:w-5/6 flex justify-between items-center">
|
|
<div
|
|
className={
|
|
"font-cormorant text-2xl p-5 " +
|
|
(isTopOfPage ? "text-transparent select-none" : "")
|
|
}
|
|
>
|
|
Richard A. Feely, DO
|
|
</div>
|
|
|
|
{/* Burger icon */}
|
|
<div className="md:hidden w-[30px] text-tertiary-300">
|
|
<Bars3Icon onClick={() => setMenuActive((e) => !e)}></Bars3Icon>
|
|
</div>
|
|
{/* Burger menu */}
|
|
{menuActive ? (
|
|
<div className="text-lg animate-fadeIn z-50 fixed top-0 right-0 h-screen bg-secondary-500 drop-shadow-lg ">
|
|
<div className="px-12 py-5 flex flex-col gap-6 text-primary-500 text-right">
|
|
<div className="pb-3 flex justify-end ">
|
|
<XMarkIcon
|
|
className="w-[30px]"
|
|
onClick={() => setMenuActive((e) => !e)}
|
|
></XMarkIcon>
|
|
</div>
|
|
<NavPages
|
|
currentPage={currentPage}
|
|
setCurrentPage={setCurrentPage}
|
|
currentPageClasses="text-primary-100"
|
|
></NavPages>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
|
|
{/* Nav Bar */}
|
|
<div
|
|
className={
|
|
"hidden md:flex font-abel tems-center gap-6 text-lg text-tertiary-300 " +
|
|
(isTopOfPage ? "px-5 py-24" : "p-5")
|
|
}
|
|
>
|
|
<NavPages
|
|
currentPage={currentPage}
|
|
setCurrentPage={setCurrentPage}
|
|
currentPageClasses="text-secondary-500"
|
|
></NavPages>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|