Citali/v2.app.gaertan.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add about page

Browse Source
This commit is contained in:
Citali
2026-02-05 15:13:32 +01:00
parent c07cca0e33
commit 41fe9f0345
5 changed files with 116 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/global/TopNav.tsx
View File

@ -1,6 +1,6 @@
"use client"
import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import { Menu } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
@ -8,17 +8,20 @@ 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)" },
{ type: "link" as const, href: "/", label: "Home" },
{ type: "link" as const, href: "/artworks", label: "Portfolio" },
{
type: "dropdown" as const,
label: "Categories",
items: [
{ href: "/artworks/animalstudies", label: "Animal Studies" },
{ href: "/artworks/artfight", label: "Artfight" }
],
},
{ type: "link" as const, href: "/commissions", label: "Commissions" },
{ type: "link" as const, href: "/commissions/status", label: "Commission Status" },
{ type: "link" as const, href: "/tos", label: "Terms of Service" },
{ type: "link" as const, href: "/about", label: "About Me" },
]
export default function TopNav() {
@ -28,18 +31,41 @@ export default function TopNav() {
<div className="w-full flex items-center justify-between">
{/* Desktop Nav */}
<div className="hidden md:flex">
<NavigationMenu>
<NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
<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>
))}
{links.map((item) => {
if (item.type === "dropdown") {
return (
<NavigationMenuItem key={item.label}>
<NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
{item.label}
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="min-w-48">
{item.items.map(({ href, label }) => (
<li key={href}>
<NavigationMenuLink asChild className="w-full hover:bg-hover">
<Link href={href}>{label}</Link>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
);
}
return (
<NavigationMenuItem key={item.href}>
<NavigationMenuLink
asChild
className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
>
<Link href={item.href}>{item.label}</Link>
</NavigationMenuLink>
</NavigationMenuItem>
);
})}
</NavigationMenuList>
</NavigationMenu>
</div>
@ -56,17 +82,42 @@ export default function TopNav() {
<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>
))}
{links.map((item) => {
if (item.type === "dropdown") {
return (
<div key={item.label} className="px-2">
<div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
{item.label}
</div>
<div className="flex flex-col">
{item.items.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>
))}
</div>
</div>
);
}
return (
<Link
key={item.href}
href={item.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"
>
{item.label}
</Link>
);
})}
</nav>
</SheetContent>
</Sheet>