77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { Logo } from "@/components/Logo";
|
|
import { NAV_LINKS } from "@/components/nav-links";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
|
|
export function Nav() {
|
|
const pathname = usePathname();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
|
|
useEffect(() => {
|
|
setOpen(false);
|
|
}, [pathname]);
|
|
|
|
function current(href: string) {
|
|
return pathname === href || pathname === `${href}/` ? "page" : undefined;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<header className="nav">
|
|
<div className="rail nav__in">
|
|
<Link className="brand" href="/">
|
|
<Logo />
|
|
<b>Vantage</b>
|
|
</Link>
|
|
|
|
<nav className="nav__links" aria-label="Main">
|
|
{NAV_LINKS.map((link) => (
|
|
<Link key={link.href} href={link.href} aria-current={current(link.href)}>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<ThemeToggle />
|
|
|
|
<button
|
|
type="button"
|
|
className="icon-btn nav__menu"
|
|
aria-expanded={open}
|
|
aria-controls="nav-drawer"
|
|
onClick={() => setOpen((v) => !v)}
|
|
>
|
|
{open ? "Close" : "Menu"}
|
|
</button>
|
|
|
|
<Link className="btn btn--solid btn--sm nav__cta" href="/start">
|
|
Create organisation
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
{open && (
|
|
<div className="drawer" id="nav-drawer">
|
|
<div className="rail">
|
|
<nav aria-label="Main, mobile">
|
|
{NAV_LINKS.map((link) => (
|
|
<Link key={link.href} href={link.href} aria-current={current(link.href)}>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Link className="btn btn--solid" href="/start">
|
|
Create organisation
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|