Complete nav rewrite: native details/summary, zero JS state, zero transforms

- Mobile nav: uses <details>/<summary> for toggle, no useState, no useEffect
- Nav dropdown: uses <details>/<summary>, no useState, no event listeners
- Desktop: separate div with desktop nav items (hidden on mobile)
- Mobile: hamburger dropdown with absolute positioned panel
- CSS: removed ::after pseudo-element with transform, replaced hover
  with background-color only, added details[open] CSS rules
- No backdrop-filter, no will-change, no transition-all, no GPU hacks
- Works on every device without JS state management

src/app/globals.css

@@ -208,25 +208,14 @@ summary,
 		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 		border-radius: 0.5rem;
 	}
-	.nav-item::after {
-		content: "";
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		width: 60%;
-		height: 3px;
-		border-radius: 3px 3px 0 0;
-		background-color: var(--color-primary);
-		transform: translateX(-50%) scaleX(0);
-		transition: transform 0.2s ease-in-out;
-	}
-	.nav-item:hover::after {
-		transform: translateX(-50%) scaleX(1);
-	}
 	.nav-item:hover {
 		color: var(--color-primary-readable, var(--color-primary));
 		background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
 	}
+	.nav-item[aria-current="page"] {
+		color: var(--color-primary-readable, var(--color-primary));
+		background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+	}
 	.dropdown-item {
 		@apply block py-2.5 px-4 text-sm font-semibold rounded-lg mx-1;
 		color: var(--color-dropdown-text-readable, var(--color-text-readable));
@@ -1076,9 +1065,6 @@ tbody tr:hover {
 		height: auto;
 		min-height: 44px;
 	}
-	.nav-item::after {
-		display: none;
-	}
 	.dropdown-item {
 		font-size: 13px;
 		padding: 0.6rem 0.85rem;
@@ -1135,3 +1121,14 @@ body:has([data-admin]) {
 	--color-input: var(--admin-border);
 	--color-ring: var(--admin-accent);
 }
+
+/* ── Details/summary open states for nav ──────────────────── */
+details[open] > summary .details-open\:hidden {
+	display: none;
+}
+details[open] > summary .details-open\:block {
+	display: block;
+}
+details[open] > summary .details-open\:rotate-180 {
+	transform: rotate(180deg);
+}

src/components/mobile-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode } from "react";
 
 interface MobileNavProps {
 	children: ReactNode;
@@ -13,44 +13,14 @@ export function MobileNav({
 	menuLabel = "Open menu",
 	closeLabel = "Close menu",
 }: MobileNavProps) {
-	const [open, setOpen] = useState(false);
-	const ref = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		if (!open) return;
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === "Escape") setOpen(false);
-		};
-		document.addEventListener("keydown", onKey);
-		return () => document.removeEventListener("keydown", onKey);
-	}, [open]);
-
-	useEffect(() => {
-		if (!open) return;
-		const onClick = (e: MouseEvent) => {
-			if (ref.current && !ref.current.contains(e.target as Node)) {
-				setOpen(false);
-			}
-		};
-		document.addEventListener("mousedown", onClick);
-		return () => document.removeEventListener("mousedown", onClick);
-	}, [open]);
-
 	return (
-		<div ref={ref} className="relative flex md:hidden">
+		<details className="relative md:hidden ml-auto">
-			<button
+			<summary
-				type="button"
+				className="list-none cursor-pointer flex items-center justify-center w-10 h-10 rounded-lg shrink-0 [&::-webkit-details-marker]:hidden"
-				onClick={() => setOpen((v) => !v)}
+				aria-label={"Menu"}
-				className="flex items-center justify-center w-10 h-10 rounded-lg ml-auto shrink-0"
-				style={{
-					color: "var(--color-navbar-text-readable, var(--color-navbar-text))",
-				}}
-				aria-expanded={open}
-				aria-controls="mobile-menu"
-				aria-label={open ? closeLabel : menuLabel}
 			>
 				<svg
-					className="w-5 h-5"
+					className="w-5 h-5 details-open:hidden"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
@@ -58,39 +28,32 @@ export function MobileNav({
 					strokeLinecap="round"
 					strokeLinejoin="round"
 				>
-					{open ? (
-						<>
-							<line x1="18" y1="6" x2="6" y2="18" />
-							<line x1="6" y1="6" x2="18" y2="18" />
-						</>
-					) : (
-						<>
 					<line x1="3" y1="6" x2="21" y2="6" />
 					<line x1="3" y1="12" x2="21" y2="12" />
 					<line x1="3" y1="18" x2="21" y2="18" />
-						</>
-					)}
 				</svg>
-			</button>
+				<svg
+					className="w-5 h-5 hidden details-open:block"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				>
+					<line x1="18" y1="6" x2="6" y2="18" />
+					<line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			</summary>
 
-			{open && (
 			<div
-					className="fixed inset-0 z-30"
+				className="absolute right-0 top-full mt-1 w-[280px] sm:w-[320px] z-50 overflow-y-auto max-h-[70vh]"
-					onClick={() => setOpen(false)}
-					style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
-				/>
-			)}
-
-			{open && (
-				<div
-					id="mobile-menu"
-					role="menu"
-					className="absolute right-0 top-full mt-1 w-screen max-w-[360px] z-40 overflow-y-auto max-h-[70vh]"
 				style={{ backgroundColor: "var(--color-navbar)" }}
 			>
 				<div
 					className="flex flex-col gap-y-0.5 p-2 rounded-xl border shadow-lg mx-2 mb-2"
 					style={{
+						backgroundColor: "var(--color-dropdown, var(--color-navbar))",
 						borderColor:
 							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 					}}
@@ -98,7 +61,6 @@ export function MobileNav({
 					{children}
 				</div>
 			</div>
-			)}
+		</details>
-		</div>
 	);
 }

src/components/nav-dropdown.tsx

@@ -1,7 +1,5 @@
-"use client";
-
 import Image from "next/image";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode } from "react";
 
 interface NavDropdownProps {
 	label: string;
@@ -10,36 +8,10 @@ interface NavDropdownProps {
 }
 
 export function NavDropdown({ label, icon, children }: NavDropdownProps) {
-	const [open, setOpen] = useState(false);
-	const ref = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		if (!open) return;
-		const onClick = (e: MouseEvent) => {
-			if (ref.current && !ref.current.contains(e.target as Node))
-				setOpen(false);
-		};
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === "Escape") setOpen(false);
-		};
-		document.addEventListener("mousedown", onClick);
-		document.addEventListener("keydown", onKey);
-		return () => {
-			document.removeEventListener("mousedown", onClick);
-			document.removeEventListener("keydown", onKey);
-		};
-	}, [open]);
-
 	return (
-		<div ref={ref} className="relative md:flex">
+		<details className="relative">
-			<button
+			<summary
-				type="button"
+				className="nav-item cursor-pointer [&::-webkit-details-marker]:hidden"
-				onClick={() => setOpen((v) => !v)}
-				onKeyDown={(e) => {
-					if (e.key === "Enter" || e.key === " ") setOpen((v) => !v);
-				}}
-				className="nav-item cursor-pointer"
-				aria-expanded={open}
 				aria-haspopup="true"
 			>
 				{icon ? (
@@ -54,7 +26,7 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 				) : null}
 				{label}
 				<svg
-					className={`ml-auto md:ml-1 w-3 h-3 ${open ? "rotate-180" : ""}`}
+					className="ml-auto md:ml-1 w-3 h-3 details-open:rotate-180"
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"
@@ -66,16 +38,13 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 						d="M19 9l-7 7-7-7"
 					/>
 				</svg>
-			</button>
+			</summary>
-			{open && (
 			<div
 				className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-0 md:min-w-[200px] rounded-xl z-50 py-2"
 				role="menu"
-					onClick={() => setOpen(false)}
 			>
 				{children}
 			</div>
-			)}
+		</details>
-		</div>
 	);
 }

src/components/navigation.tsx

@@ -24,6 +24,7 @@ export async function Navigation() {
 					style={{ backgroundColor: "var(--color-primary, #eeb425)" }}
 				/>
 
+				{/* Desktop: home link */}
 				<div className="hidden md:flex items-center gap-x-1">
 					<Link href="/" className="nav-item shrink-0">
 						<Image
@@ -37,11 +38,135 @@ export async function Navigation() {
 					</Link>
 				</div>
 
+				{/* Desktop: nav items */}
+				<div className="hidden md:flex items-center gap-x-1">
+					<NavDropdown
+						label={t("community")}
+						icon="/assets/images/icons/navigation/community.png"
+					>
+						<Link href="/news" className="dropdown-item" role="menuitem">
+							{t("articles")}
+						</Link>
+						<Link href="/photos" className="dropdown-item" role="menuitem">
+							{t("photos")}
+						</Link>
+						<Link href="/staff" className="dropdown-item" role="menuitem">
+							{t("staff")}
+						</Link>
+						<Link href="/rankings" className="dropdown-item" role="menuitem">
+							{t("rankings")}
+						</Link>
+						<Link href="/guilds" className="dropdown-item" role="menuitem">
+							{t("guilds")}
+						</Link>
+					</NavDropdown>
+
+					<NavDropdown
+						label={t("shop")}
+						icon="/assets/images/icons/navigation/shop.png"
+					>
+						<Link href="/shop" className="dropdown-item" role="menuitem">
+							{t("shop")}
+						</Link>
+						<Link href="/marketplace" className="dropdown-item" role="menuitem">
+							{t("market")}
+						</Link>
+						<Link href="/rares" className="dropdown-item" role="menuitem">
+							{t("rareValues")}
+						</Link>
+					</NavDropdown>
+
+					<Link href="/leaderboard" className="nav-item">
+						<Image
+							src="/assets/images/icons/navigation/leaderboards.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						{t("leaderboards")}
+					</Link>
+
+					<Link href="/radio" className="nav-item">
+						<Image
+							src="/assets/images/icons/navigation/bb.png"
+							alt=""
+							width={20}
+							height={20}
+							className="mr-1.5"
+						/>
+						{t("radio")}
+					</Link>
+
+					<NavDropdown
+						label={t("assistance")}
+						icon="/assets/images/icons/navigation/rules.gif"
+					>
+						<Link href="/help" className="dropdown-item" role="menuitem">
+							{t("helpCenter")}
+						</Link>
+						{session?.user ? (
+							<Link
+								href="/help/tickets"
+								className="dropdown-item"
+								role="menuitem"
+							>
+								{t("myTickets")}
+							</Link>
+						) : null}
+						<Link href="/badges" className="dropdown-item" role="menuitem">
+							{t("badges")}
+						</Link>
+						<Link href="/draw-badge" className="dropdown-item" role="menuitem">
+							{t("drawBadge")}
+						</Link>
+					</NavDropdown>
+
+					{session?.user ? (
+						<>
+							<Link href="/friends" className="nav-item">
+								<Image
+									src="/assets/images/icons/navigation/goody.png"
+									alt=""
+									width={20}
+									height={20}
+									className="mr-1.5"
+								/>
+								{t("friends")}
+							</Link>
+							<Link href="/messages" className="nav-item">
+								<Image
+									src="/assets/images/icons/navigation/bb.png"
+									alt=""
+									width={20}
+									height={20}
+									className="mr-1.5"
+								/>
+								{t("messages")}
+							</Link>
+						</>
+					) : null}
+
+					{isStaff ? (
+						<Link href="/admin" className="nav-item">
+							<Image
+								src="/assets/images/icons/navigation/home.png"
+								alt=""
+								width={20}
+								height={20}
+								className="mr-1.5"
+							/>
+							{t("admin")}
+						</Link>
+					) : null}
+				</div>
+
+				{/* Mobile: hamburger menu (details/summary) */}
 				<MobileNav
 					menuLabel={t("openMenu") || "Open menu"}
 					closeLabel={t("closeMenu") || "Close menu"}
 				>
-					<Link href="/" className="nav-item" role="menuitem">
+					<Link href="/" className="nav-item">
 						<Image
 							src="/assets/images/icons/navigation/me.png"
 							alt=""
@@ -88,7 +213,7 @@ export async function Navigation() {
 						</Link>
 					</NavDropdown>
 
-					<Link href="/leaderboard" className="nav-item" role="menuitem">
+					<Link href="/leaderboard" className="nav-item">
 						<Image
 							src="/assets/images/icons/navigation/leaderboards.png"
 							alt=""
@@ -99,7 +224,7 @@ export async function Navigation() {
 						{t("leaderboards")}
 					</Link>
 
-					<Link href="/radio" className="nav-item" role="menuitem">
+					<Link href="/radio" className="nav-item">
 						<Image
 							src="/assets/images/icons/navigation/bb.png"
 							alt=""
@@ -185,6 +310,7 @@ export async function Navigation() {
 					</div>
 				</MobileNav>
 
+				{/* Desktop: controls */}
 				<div className="ml-auto hidden md:flex items-center gap-x-1">
 					<LanguageSwitcher />
 					<NavbarColorPicker />