Fix the topnav for more responsiveness
This commit is contained in:
@ -1,9 +1,9 @@
|
||||
"use client"
|
||||
|
||||
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
||||
import { Menu } from "lucide-react";
|
||||
import { ChevronDown, Ellipsis, Menu } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { Button } from "../ui/button";
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
|
||||
|
||||
@ -18,6 +18,7 @@ const links = [
|
||||
{ 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" },
|
||||
@ -26,46 +27,196 @@ const links = [
|
||||
|
||||
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">
|
||||
<NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
|
||||
<NavigationMenuList>
|
||||
{links.map((item) => {
|
||||
if (item.type === "dropdown") {
|
||||
<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.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 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 (
|
||||
<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>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user