72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
|
|
import AuthModal from "@components/AuthModal";
|
|
import { usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useMemo } from "react";
|
|
import { FaRegUserCircle } from "react-icons/fa";
|
|
|
|
function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
|
|
const pathname = usePathname();
|
|
const isActive = dropdownItems ? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`) : pathname === href;
|
|
|
|
return (
|
|
<button className="flex items-center justify-center px-2 py-4 relative group">
|
|
{dropdownItems ? (
|
|
<span className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}>{name}</span>
|
|
) : (
|
|
<Link href={href} className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}>
|
|
{name}
|
|
</Link>
|
|
)}
|
|
{dropdownItems && (
|
|
<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
|
|
<ul>
|
|
{dropdownItems.map((item) => {
|
|
const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
|
|
const isDropdownActive = pathname === itemHref;
|
|
return (
|
|
<li key={item}>
|
|
<Link href={itemHref} className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}>
|
|
{item}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default function Navbar() {
|
|
const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
|
|
// const navOptions = useMemo(() => ["Earthquakes"], []);
|
|
const aboutDropdown = ["Our Mission", "The Team", "Contact Us"];
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
|
|
<div className="my-1 flex aspect-square ml-3 mr-3">
|
|
<Link href="/" className="rounded-full">
|
|
<Image height={2000} width={2000} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
|
|
</Link>
|
|
</div>
|
|
<div className="flex">
|
|
{navOptions.map((name) => (
|
|
<NavbarButton name={name} href={`/${name.toLowerCase()}`} key={name} />
|
|
))}
|
|
<NavbarButton name="About Us" href="/about" dropdownItems={aboutDropdown} />
|
|
</div>
|
|
<div className="flex-grow" />
|
|
<button className="my-auto mr-4" onClick={() => setIsModalOpen(true)}>
|
|
<FaRegUserCircle size={22} />
|
|
</button>
|
|
<AuthModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
|
|
</div>
|
|
);
|
|
}
|