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

Fix the topnav for more responsiveness

Browse Source
This commit is contained in:
Citali
2026-02-05 17:05:49 +01:00
parent 6ff04f321d
commit dd0c87167c
5 changed files with 270 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/(normal)/artworks/artfight/page.tsx Normal file
View File

@ -0,0 +1,13 @@
import UnderConstruction from "@/components/global/UnderConstruction";
export default function ArtfightPage() {
return (
<div className="mx-auto w-full max-w-6xl px-4 py-10">
<UnderConstruction
title="Artfight Gallery"
subtitle="This page is getting ready for its big debut."
note="I’m curating attacks, revenges, and progress shots — check back soon."
/>
</div>
);
}

13
src/app/(normal)/miniatures/page.tsx Normal file
View File

@ -0,0 +1,13 @@
import UnderConstruction from "@/components/global/UnderConstruction";
export default function MiniaturesPage() {
return (
<div className="mx-auto w-full max-w-6xl px-4 py-10">
<UnderConstruction
title="Warhammer Miniatures"
subtitle="This page is getting ready for its big debut."
note="I’m curating attacks, revenges, and progress shots — check back soon."
/>
</div>
);
}

6
src/components/global/Header.tsx
View File

@ -6,9 +6,11 @@ export default function Header() {
return (
<div className="w-full">
<div className="flex items-center justify-between px-4 md:px-8 py-2">
<div className="flex w-full items-center gap-4 px-4 md:px-8 py-2">
<div className="flex-1 min-w-0">
<TopNav />
<div className="flex items-center gap-2">
</div>
<div className="flex items-center gap-2 shrink-0">
<NsfwModeToggle />
<ModeToggle />
</div>

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

@ -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,21 +27,105 @@ 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) => {
<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>
<NavigationMenuContent className="z-50">
<ul className="min-w-48">
{item.items.map(({ href, label }) => (
<li key={href}>
@ -66,6 +151,72 @@ export default function TopNav() {
</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>

55
src/components/global/UnderConstruction.tsx Normal file
View File

@ -0,0 +1,55 @@
import { cn } from "@/lib/utils";
import { Construction } from "lucide-react";
import Link from "next/link";
export default function UnderConstruction({
title = "Under Construction",
subtitle = "Artfight is getting its finishing touches.",
note = "Check back soon for the full gallery.",
actionHref = "/artworks",
actionLabel = "Back to Portfolio",
}: {
title?: string;
subtitle?: string;
note?: string;
actionHref?: string;
actionLabel?: string;
}) {
return (
<section className="relative overflow-hidden rounded-3xl border border-border bg-background/80 px-6 py-10 shadow-sm sm:px-10 sm:py-14">
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,var(--color-muted)_0%,transparent_55%)] opacity-70" />
<div className="pointer-events-none absolute left-0 top-0 h-2 w-full bg-[repeating-linear-gradient(135deg,#7f1d1d_0px,#7f1d1d_8px,#ffffff_8px,#ffffff_16px)]" />
<div className="relative flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
<div className="max-w-xl space-y-4">
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium uppercase tracking-widest text-muted-foreground">
<Construction className="h-3.5 w-3.5 text-foreground/70" />
Under construction
</div>
<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
{title}
</h1>
<p className="text-base text-muted-foreground sm:text-lg">
{subtitle}
</p>
<p className="text-sm text-muted-foreground/80">{note}</p>
<Link
href={actionHref}
className={cn(
"inline-flex items-center justify-center rounded-full border border-border bg-foreground px-4 py-2 text-sm font-medium text-background",
"transition hover:-translate-y-0.5 hover:bg-foreground/90"
)}
>
{actionLabel}
</Link>
</div>
<div className="relative mx-auto w-full max-w-md">
<div className="relative flex flex-col items-center justify-center gap-4 p-4">
<Construction className="h-20 w-20 text-red-800" />
</div>
</div>
</div>
</section>
);
}