63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
|
import Link from "next/link"
|
||
|
|
|
||
|
|
import { siteConfig, navLinks } from "@/lib/site"
|
||
|
|
import { buttonVariants } from "@/components/ui/button"
|
||
|
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||
|
|
import { Menu } from "lucide-react"
|
||
|
|
|
||
|
|
function DesktopNav() {
|
||
|
|
return (
|
||
|
|
<nav className="hidden gap-6 md:flex" aria-label="Main navigation">
|
||
|
|
{navLinks.map((item) => (
|
||
|
|
<Link
|
||
|
|
key={item.href}
|
||
|
|
href={item.href}
|
||
|
|
className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function MobileNav() {
|
||
|
|
return (
|
||
|
|
<Sheet>
|
||
|
|
<SheetTrigger
|
||
|
|
className={buttonVariants({ variant: "outline", size: "icon" }) + " md:hidden"}
|
||
|
|
aria-label="Open menu"
|
||
|
|
>
|
||
|
|
<Menu className="size-5" />
|
||
|
|
</SheetTrigger>
|
||
|
|
<SheetContent side="right">
|
||
|
|
<nav className="mt-8 flex flex-col gap-4" aria-label="Mobile navigation">
|
||
|
|
{navLinks.map((item) => (
|
||
|
|
<Link
|
||
|
|
key={item.href}
|
||
|
|
href={item.href}
|
||
|
|
className="text-base font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</SheetContent>
|
||
|
|
</Sheet>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Header() {
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/60">
|
||
|
|
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
|
||
|
|
<Link href="/" className="text-lg font-semibold tracking-tight">
|
||
|
|
{siteConfig.name}
|
||
|
|
</Link>
|
||
|
|
<DesktopNav />
|
||
|
|
<MobileNav />
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
)
|
||
|
|
}
|