279 lines
11 KiB
TypeScript
279 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
|
import { ChevronDown, Ellipsis, Menu } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
import { Button } from "../ui/button";
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
|
|
|
|
const links = [
|
|
{ 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: "/miniatures", label: "Miniatures" },
|
|
{ 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() {
|
|
const [open, setOpen] = useState(false)
|
|
const requiredLinks = [
|
|
links[0], // Home
|
|
links[1], // Portfolio
|
|
links[4], // Commissions
|
|
];
|
|
const flexibleLinks = links.filter((link) => !requiredLinks.includes(link));
|
|
const [visibleCount, setVisibleCount] = useState(flexibleLinks.length);
|
|
const listRef = useRef<HTMLUListElement | null>(null);
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const measureListRef = useRef<HTMLUListElement | null>(null);
|
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
|
|
const visibleLinks = [...requiredLinks, ...flexibleLinks.slice(0, visibleCount)];
|
|
const overflowLinks = flexibleLinks.slice(visibleCount);
|
|
const showMore = overflowLinks.length > 0;
|
|
|
|
useEffect(() => {
|
|
const containerEl = containerRef.current;
|
|
if (!containerEl) return;
|
|
const update = () => {
|
|
setContainerWidth(containerEl.getBoundingClientRect().width);
|
|
};
|
|
const ro = new ResizeObserver(update);
|
|
ro.observe(containerEl);
|
|
window.addEventListener("resize", update);
|
|
update();
|
|
return () => {
|
|
ro.disconnect();
|
|
window.removeEventListener("resize", update);
|
|
};
|
|
}, []);
|
|
|
|
useLayoutEffect(() => {
|
|
const measureEl = measureListRef.current;
|
|
if (!measureEl || !containerWidth) return;
|
|
const items = Array.from(measureEl.children) as HTMLElement[];
|
|
if (!items.length) return;
|
|
|
|
const moreItem = items[items.length - 1];
|
|
const moreWidth = moreItem.getBoundingClientRect().width;
|
|
const itemWidths = items.slice(0, -1).map((el) => el.getBoundingClientRect().width);
|
|
|
|
const requiredIndexes = new Set([0, 1, 4]);
|
|
let requiredWidth = 0;
|
|
const flexibleWidths: number[] = [];
|
|
itemWidths.forEach((w, idx) => {
|
|
if (requiredIndexes.has(idx)) {
|
|
requiredWidth += w;
|
|
} else {
|
|
flexibleWidths.push(w);
|
|
}
|
|
});
|
|
|
|
const totalFlexibleWidth = flexibleWidths.reduce((a, b) => a + b, 0);
|
|
let nextVisibleCount = flexibleLinks.length;
|
|
const safetyPadding = 24;
|
|
|
|
if (requiredWidth + totalFlexibleWidth + safetyPadding > containerWidth) {
|
|
let available = containerWidth - requiredWidth - moreWidth - safetyPadding;
|
|
if (available < 0) available = 0;
|
|
let fit = 0;
|
|
let used = 0;
|
|
for (const w of flexibleWidths) {
|
|
if (used + w > available) break;
|
|
used += w;
|
|
fit += 1;
|
|
}
|
|
nextVisibleCount = fit;
|
|
}
|
|
|
|
if (nextVisibleCount !== visibleCount) {
|
|
setVisibleCount(nextVisibleCount);
|
|
}
|
|
|
|
}, [containerWidth, flexibleLinks.length, visibleCount]);
|
|
|
|
return (
|
|
<div className="w-full flex items-center justify-between">
|
|
{/* Desktop Nav */}
|
|
<div className="hidden md:flex flex-1 min-w-0">
|
|
<NavigationMenu
|
|
viewport={false}
|
|
delayDuration={0}
|
|
skipDelayDuration={0}
|
|
className="w-full min-w-0 max-w-none"
|
|
>
|
|
<div ref={containerRef} className="w-full max-w-full min-w-0">
|
|
<NavigationMenuList
|
|
ref={listRef}
|
|
className="w-full flex-nowrap justify-start min-w-0"
|
|
>
|
|
{visibleLinks.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 className="z-50">
|
|
<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>
|
|
);
|
|
})}
|
|
{showMore ? (
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
|
|
<Ellipsis className="h-4 w-4" />
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent className="z-50">
|
|
<ul className="min-w-48">
|
|
{overflowLinks.map((item) => {
|
|
if (item.type === "dropdown") {
|
|
return (
|
|
<li key={item.label}>
|
|
<div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
|
|
{item.label}
|
|
</div>
|
|
<ul className="pl-2">
|
|
{item.items.map(({ href, label }) => (
|
|
<li key={href}>
|
|
<NavigationMenuLink asChild className="w-full hover:bg-hover">
|
|
<Link href={href}>{label}</Link>
|
|
</NavigationMenuLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li key={item.href}>
|
|
<NavigationMenuLink asChild className="w-full hover:bg-hover">
|
|
<Link href={item.href}>{item.label}</Link>
|
|
</NavigationMenuLink>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
) : null}
|
|
</NavigationMenuList>
|
|
</div>
|
|
</NavigationMenu>
|
|
</div>
|
|
|
|
<div className="absolute left-0 top-0 -z-10 opacity-0 pointer-events-none">
|
|
<NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
|
|
<NavigationMenuList ref={measureListRef} className="flex-nowrap">
|
|
{links.map((item) => (
|
|
<NavigationMenuItem key={`measure-${item.type === "dropdown" ? item.label : item.href}`}>
|
|
<div className={navigationMenuTriggerStyle()}>
|
|
{item.type === "dropdown" ? (
|
|
<span className="inline-flex items-center gap-1">
|
|
{item.label}
|
|
<ChevronDown className="h-3 w-3" />
|
|
</span>
|
|
) : (
|
|
item.label
|
|
)}
|
|
</div>
|
|
</NavigationMenuItem>
|
|
))}
|
|
<NavigationMenuItem>
|
|
<div className={navigationMenuTriggerStyle()}>
|
|
<Ellipsis className="h-4 w-4" />
|
|
</div>
|
|
</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((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>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|