100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { MenuIcon } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
import { SignOutButton } from "@/components/sign-out-button";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { BrandLockup } from "@/components/brand-mark";
|
|
import { BRAND_NAME } from "@/lib/brand";
|
|
|
|
type HeaderLink = {
|
|
href: string;
|
|
label: string;
|
|
};
|
|
|
|
export function SiteHeaderBar({
|
|
links,
|
|
primary,
|
|
signedIn,
|
|
}: {
|
|
links: HeaderLink[];
|
|
primary?: HeaderLink | null;
|
|
signedIn: boolean;
|
|
}) {
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-border/70 bg-background/80 pt-[env(safe-area-inset-top)] backdrop-blur-md">
|
|
<div className="page-pad mx-auto flex h-14 w-full max-w-6xl items-center justify-between gap-3 sm:h-16">
|
|
<Link
|
|
href="/"
|
|
className="text-xl sm:text-2xl"
|
|
aria-label={`${BRAND_NAME} home`}
|
|
>
|
|
<BrandLockup markClassName="size-6 sm:size-7" />
|
|
</Link>
|
|
<nav className="hidden items-center gap-1 sm:flex">
|
|
{links.map((link) => (
|
|
<Button key={link.href} asChild variant="ghost" size="sm">
|
|
<Link href={link.href}>{link.label}</Link>
|
|
</Button>
|
|
))}
|
|
{primary ? (
|
|
<Button asChild size="sm">
|
|
<Link href={primary.href}>{primary.label}</Link>
|
|
</Button>
|
|
) : null}
|
|
<ThemeToggle />
|
|
{signedIn ? <SignOutButton /> : null}
|
|
</nav>
|
|
<div className="flex items-center gap-1 sm:hidden">
|
|
<ThemeToggle />
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-lg"
|
|
className="tap-target"
|
|
aria-label="Open menu"
|
|
>
|
|
<MenuIcon aria-hidden="true" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[min(20rem,90vw)]">
|
|
<SheetHeader>
|
|
<SheetTitle className="text-2xl">
|
|
<BrandLockup />
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<nav className="flex flex-col gap-2 px-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
|
|
{links.map((link) => (
|
|
<Button asChild key={link.href} variant="ghost" className="tap-target justify-start">
|
|
<Link href={link.href}>{link.label}</Link>
|
|
</Button>
|
|
))}
|
|
{primary ? (
|
|
<Button asChild className="tap-target justify-start">
|
|
<Link href={primary.href}>{primary.label}</Link>
|
|
</Button>
|
|
) : null}
|
|
{signedIn ? (
|
|
<div className="pt-2">
|
|
<SignOutButton />
|
|
</div>
|
|
) : null}
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|