Add Dockerfile, add raw view
This commit is contained in:
74
src/components/global/TopNav.tsx
Normal file
74
src/components/global/TopNav.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
"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: "/portfolio/artfight", label: "Artfight" },
|
||||
// { href: "/portfolio/minis", label: "Miniatures" },
|
||||
// { href: "/commissions", label: "Commissions" },
|
||||
// { href: "/ych", label: "YCH / Custom offers" },
|
||||
// { href: "/tos", label: "Terms of Service" },
|
||||
// { 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()}
|
||||
>
|
||||
<Link href={href}>{label}</Link>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
))}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
|
||||
{/* Mobile Nav */}
|
||||
<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 hover:bg-muted text-sm font-medium transition-colors"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user