drfeely.com/website/components/Navbar/index.tsx

96 lines
2.9 KiB
TypeScript
Raw Normal View History

2023-07-23 22:26:35 +00:00
"use client";
2023-07-25 03:14:18 +00:00
import { useEffect, useState } from "react";
2023-07-23 22:26:35 +00:00
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
import NavPages from "./NavPages";
2023-08-25 19:06:28 +00:00
import logo from "@/public/logo.png";
import logo_small from "@/public/logo_small.png";
import Image from "next/image";
2023-08-26 02:18:11 +00:00
import { usePathname } from "next/navigation";
2023-07-23 22:26:35 +00:00
const Navbar = () => {
2023-07-25 03:14:18 +00:00
const [isTopOfPage, setIsTopOfPage] = useState(true);
2023-07-23 22:26:35 +00:00
const [menuActive, setMenuActive] = useState(false);
2023-08-26 02:18:11 +00:00
const currentPage = "/" + usePathname().split("/")[1];
2023-07-25 03:14:18 +00:00
useEffect(() => {
const handleScroll = () => {
if (window.scrollY === 0) {
setIsTopOfPage(true);
} else {
setIsTopOfPage(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
2023-08-26 02:18:11 +00:00
const useSmallNav: boolean = isTopOfPage && currentPage === "/";
2023-07-23 22:26:35 +00:00
return (
2023-07-25 03:14:18 +00:00
<nav
className={
2023-08-25 19:06:28 +00:00
"bg-primary-500 text-primary-100 fixed top-0 z-40 w-full " +
2023-08-26 02:18:11 +00:00
(useSmallNav
2023-07-25 03:14:18 +00:00
? "bg-transparent"
2023-08-25 19:06:28 +00:00
: "bg-opacity-75 backdrop-blur-sm drop-shadow")
2023-07-25 03:14:18 +00:00
}
>
2023-07-23 22:26:35 +00:00
<div className="mx-auto w-11/12 lg:w-5/6 flex justify-between items-center">
2023-08-25 19:06:28 +00:00
<div className="flex justify-between items-center">
<Image
2023-08-26 02:18:11 +00:00
src={useSmallNav ? logo_small : logo_small}
2023-08-25 19:06:28 +00:00
alt="Feely Center Logo"
className={
"drop-shadow-2xl " +
2023-08-26 02:18:11 +00:00
(useSmallNav ? "w-32 md:w-44" : "w-16 md:w-24")
2023-08-25 19:06:28 +00:00
}
/>
<div
className={
"font-cormorant text-2xl p-5 " +
2023-08-26 02:18:11 +00:00
(useSmallNav ? "text-transparent select-none" : "")
2023-08-25 19:06:28 +00:00
}
>
Richard A. Feely, DO
</div>
2023-07-25 03:14:18 +00:00
</div>
2023-07-23 22:26:35 +00:00
{/* Burger icon */}
2023-08-25 19:06:28 +00:00
<div className="md:hidden w-[30px] text-tertiary-300 ">
2023-07-23 22:26:35 +00:00
<Bars3Icon onClick={() => setMenuActive((e) => !e)}></Bars3Icon>
</div>
{/* Burger menu */}
{menuActive ? (
2023-07-25 03:14:18 +00:00
<div className="text-lg animate-fadeIn z-50 fixed top-0 right-0 h-screen bg-secondary-500 drop-shadow-lg ">
2023-07-23 22:26:35 +00:00
<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>
2023-08-26 02:18:11 +00:00
<NavPages currentPageClasses="text-primary-100"></NavPages>
2023-07-23 22:26:35 +00:00
</div>
</div>
) : (
<></>
)}
{/* Nav Bar */}
2023-07-25 03:14:18 +00:00
<div
className={
"hidden md:flex font-abel tems-center gap-6 text-lg text-tertiary-300 " +
2023-08-26 02:18:11 +00:00
(useSmallNav ? "px-5 py-24" : "p-5")
2023-07-25 03:14:18 +00:00
}
>
2023-08-26 02:18:11 +00:00
<NavPages currentPageClasses="text-secondary-500"></NavPages>
2023-07-23 22:26:35 +00:00
</div>
</div>
</nav>
);
};
export default Navbar;