105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import Logo from "./Logo";
|
|
|
|
const links = [
|
|
{ href: "/", label: "Home" },
|
|
{ href: "/about", label: "About" },
|
|
{ href: "/events", label: "Events" },
|
|
{ href: "/knowledge", label: "Knowledge" },
|
|
{ href: "/blog", label: "Blog" },
|
|
{ href: "/gallery", label: "Gallery" },
|
|
{ href: "/why-join", label: "Why Join" },
|
|
{ href: "/contact", label: "Contact" },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
const [open, setOpen] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 20);
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll);
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
const isActive = (href: string) =>
|
|
href === "/" ? pathname === "/" : pathname.startsWith(href);
|
|
|
|
return (
|
|
<header className="nav">
|
|
<div className="container nav__inner">
|
|
<nav className={`nav__bar ${scrolled ? "nav__bar--scrolled" : ""}`}>
|
|
<Link href="/" className="nav__brand">
|
|
<Logo size={38} />
|
|
</Link>
|
|
|
|
<ul className="nav__links">
|
|
{links.map((l) => (
|
|
<li key={l.href}>
|
|
<Link
|
|
href={l.href}
|
|
className={`nav__link ${isActive(l.href) ? "nav__link--active" : ""}`}
|
|
>
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="nav__actions">
|
|
<Link href="/why-join" className="btn-primary btn-primary--sm nav__login">
|
|
Member Login
|
|
</Link>
|
|
<button
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="nav__toggle"
|
|
aria-label="Menu"
|
|
>
|
|
<span className={`nav__toggle-box ${open ? "is-open" : ""}`}>
|
|
<span className="nav__bar-line nav__bar-line--1" />
|
|
<span className="nav__bar-line nav__bar-line--2" />
|
|
<span className="nav__bar-line nav__bar-line--3" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{open && (
|
|
<div className="nav__mobile">
|
|
<ul className="nav__mobile-list">
|
|
{links.map((l) => (
|
|
<li key={l.href}>
|
|
<Link
|
|
href={l.href}
|
|
onClick={() => setOpen(false)}
|
|
className={`nav__mobile-link ${
|
|
isActive(l.href) ? "nav__mobile-link--active" : ""
|
|
}`}
|
|
>
|
|
{l.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li className="nav__mobile-cta">
|
|
<Link
|
|
href="/why-join"
|
|
onClick={() => setOpen(false)}
|
|
className="btn-primary nav__mobile-login"
|
|
>
|
|
Member Login
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|