"use client";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { usePathname as useRawPathname } from "next/navigation";
import NextLink from "next/link";
import { Link, usePathname } from "@/i18n/navigation";
import { LocaleSwitch } from "@/components/LocaleSwitch";
export function MobileNavMenu({
links,
accountHref,
accountLabel,
adminHref,
adminLabel,
}: {
links: { href: string; label: string }[];
accountHref: string;
accountLabel: string;
adminHref?: string;
adminLabel?: string;
}) {
const [open, setOpen] = useState(false);
const pathname = usePathname();
const rawPathname = useRawPathname();
const isActive = (href: string) => (href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`));
const isAdminActive = rawPathname.startsWith("/de/admin");
// Erst nach dem Mount rendern (document existiert server-seitig nicht) —
// Standard-Voraussetzung für createPortal in Next.js/React, lässt sich
// nicht ohne echte Hydration-Mismatch-Gefahr umgehen (ein lazy-initialer
// "typeof document !== 'undefined'"-State würde serverseitig false, beim
// Hydrieren aber sofort true liefern).
const [mounted, setMounted] = useState(false);
// eslint-disable-next-line react-hooks/set-state-in-effect -- siehe Kommentar oben
useEffect(() => setMounted(true), []);
// Hintergrund fixieren, solange das Menü offen ist — sonst scrollt die
// Seite dahinter unsichtbar mit und man landet beim Schließen woanders.
useEffect(() => {
if (!open) return;
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = prev;
};
}, [open]);
return (
<>
{/* Per Portal direkt an document.body statt hier im Baum zu rendern —
dieser Button steckt tief im fixierten (SiteHeader/
HeaderScrollShell). Der hat beim Scrollen backdrop-blur aktiv, und
jedes Element mit aktivem backdrop-filter/filter/transform wird laut
CSS-Spec selbst zum Bezugsrahmen für position:fixed-Nachfahren -
das "Vollbild"-Menü hätte dann nur noch die Höhe des Headers
abgedeckt statt des ganzen Bildschirms (Fund vom Nutzer, 21.09.2026,
echtes iPhone: Menü zeigte "DE/EN" mitten auf der Seite, darunter
schien der Portfolio-Grid durch). Zusätzlich erzeugt der Header
durch position:fixed+z-index einen eigenen Stacking-Context, der
das Menü unabhängig von seinem eigenen z-index unter die
Eckklammern (Geschwister des Headers, siehe HeaderPositioning.tsx)
hätte rutschen lassen — derselbe Nutzer-Fund zeigte die Eckklammer
sichtbar über dem Menü-Wordmark. Ein Portal umgeht beide Fallen,
weil das Menü dann kein Nachfahre des Headers mehr ist. */}
{mounted && open && createPortal(