77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
|
import { Menu } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { Button } from "../ui/button";
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
|
|
|
|
const links = [
|
|
{ href: "/", label: "Home" },
|
|
{ href: "/artworks", label: "Portfolio" },
|
|
{ href: "/artworks/animalstudies", label: "Animal Studies" },
|
|
{ href: "/commissions", label: "Commissions" },
|
|
{ href: "/commissions/status", label: "Commission Status" },
|
|
{ href: "/tos", label: "Terms of Service" },
|
|
// { href: "/portfolio/artfight", label: "Artfight" },
|
|
// { href: "/portfolio/minis", label: "Miniatures" },
|
|
// { href: "/commissions", label: "Commissions" },
|
|
// { href: "/ych", label: "YCH / Custom offers" },
|
|
// { href: "/todo", label: "todo (temp)" },
|
|
]
|
|
|
|
export default function TopNav() {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="w-full flex items-center justify-between">
|
|
{/* Desktop Nav */}
|
|
<div className="hidden md:flex">
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
{links.map(({ href, label }) => (
|
|
<NavigationMenuItem key={href}>
|
|
<NavigationMenuLink
|
|
asChild
|
|
className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
|
|
>
|
|
<Link href={href}>{label}</Link>
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
|
|
<div className="md:hidden">
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Menu className="w-6 h-6" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left">
|
|
<SheetHeader>
|
|
<SheetTitle className="text-lg">Navigation</SheetTitle>
|
|
</SheetHeader>
|
|
<nav className="mt-4 flex flex-col gap-2">
|
|
{links.map(({ href, label }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
onClick={() => setOpen(false)}
|
|
className="block px-4 py-2 rounded-md text-sm font-medium transition-colors
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|