52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { Link, useLocation } from "react-router";
|
|
import { Logo } from "./Logo";
|
|
import { ThemeToggle } from "./ThemeToggle";
|
|
import { useSession } from "@/lib/use-session";
|
|
import { ADMIN_ENTRY_PATH } from "@/lib/admin-entry";
|
|
|
|
const nav = [
|
|
{ href: "/kampanyok", label: "Projektek" },
|
|
{ href: "/sikersztorik", label: "Sikersztorik" },
|
|
{ href: "/hogyan-mukodik", label: "Hogyan működik?" },
|
|
];
|
|
|
|
export function SiteHeader() {
|
|
const { isAdmin: admin } = useSession();
|
|
const onAdminEntry = useLocation().pathname === ADMIN_ENTRY_PATH;
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-line bg-bg/85 backdrop-blur">
|
|
<div className="mx-auto flex max-w-6xl items-center gap-7 px-5 py-3.5">
|
|
<Link to="/" className="shrink-0">
|
|
<Logo size="sm" />
|
|
</Link>
|
|
<nav className="hidden md:block">
|
|
<ul className="flex gap-6 text-sm font-medium text-muted">
|
|
{nav.map((n) => (
|
|
<li key={n.href}>
|
|
<Link to={n.href} className="transition-colors hover:text-fg">
|
|
{n.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<ThemeToggle />
|
|
{/* Signing in does nothing for a visitor: a session only unlocks
|
|
/api/admin/*, and backing a campaign is planned to need no
|
|
account at all. So the link is offered to an admin, or on the
|
|
admin entry page, and to nobody else. */}
|
|
{(admin || onAdminEntry) && (
|
|
<Link
|
|
to={admin ? "/admin" : "/belepes"}
|
|
className="hidden text-sm font-medium text-muted transition-colors hover:text-fg sm:block"
|
|
>
|
|
{admin ? "Admin" : "Belépés"}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|