112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
// components/TopNav.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
import { useAuth } from "@/context/AuthContext";
|
|
import ThemeToggle from "@/components/ThemeToggle";
|
|
|
|
function NavLink({
|
|
href,
|
|
children,
|
|
title
|
|
}: {
|
|
href: string;
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const active = pathname === href || pathname.startsWith(href + '/');
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
title={title}
|
|
className={[
|
|
"relative text-xs font-medium transition-colors pb-0.5",
|
|
active
|
|
? "text-zinc-100 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-amber-400"
|
|
: "text-zinc-400 hover:text-zinc-100",
|
|
].join(" ")}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function TopNav() {
|
|
const { user, logout, loading } = useAuth();
|
|
const isAuthenticated = !!user;
|
|
|
|
return (
|
|
<header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
|
|
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
|
|
{/* Left: Brand / Home */}
|
|
<Link
|
|
href="/"
|
|
className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
|
|
>
|
|
<Image
|
|
src="/battl/battl-logo-mark-f.svg"
|
|
alt="Battl Builders Logo"
|
|
width={260}
|
|
height={48}
|
|
className="block"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Centre: primary nav links */}
|
|
<nav className="hidden sm:flex items-center gap-5">
|
|
<NavLink href="/builder">Builder</NavLink>
|
|
<NavLink href="/guides">Guides</NavLink>
|
|
<NavLink href="/builds">Community</NavLink>
|
|
</nav>
|
|
|
|
{/* Right side actions */}
|
|
<div className="flex items-center justify-end gap-3 sm:gap-4">
|
|
<ThemeToggle />
|
|
|
|
{loading ? (
|
|
<span className="text-xs text-zinc-500">Checking session…</span>
|
|
) : isAuthenticated ? (
|
|
<>
|
|
<NavLink href="/vault" title={"Your builds"}>Vault</NavLink>
|
|
|
|
{/* Email/displayName links to Account */}
|
|
<Link
|
|
href="/account"
|
|
className="hidden text-xs text-zinc-300 hover:text-zinc-100 transition-colors sm:inline"
|
|
title="Account"
|
|
>
|
|
{user.displayName || user.email}
|
|
</Link>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={logout}
|
|
className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
|
|
>
|
|
Log Out
|
|
</button>
|
|
</>
|
|
) : (
|
|
<div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center sm:gap-4">
|
|
<NavLink href="/login">Log In</NavLink>
|
|
|
|
<Link
|
|
href="/register"
|
|
className="rounded-md border border-amber-400/70 bg-amber-400/10 px-3 py-1.5 text-xs font-semibold text-amber-200 hover:bg-amber-400/20 transition-colors"
|
|
>
|
|
Join Beta
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
export default TopNav;
|