2026-06-17 14:28:29 +02:00
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
|
import { createPortal } from "react-dom";
|
2026-06-15 00:30:34 +02:00
|
|
|
import { Check, Globe } from "lucide-react";
|
|
|
|
|
import { LANGUAGES, type LangCode } from "../i18n";
|
|
|
|
|
|
|
|
|
|
// Compact language picker (globe + current code). Presentational: the parent decides what
|
|
|
|
|
// changing the language does (set it; persist server-side when signed in).
|
2026-06-17 14:28:29 +02:00
|
|
|
//
|
|
|
|
|
// Two variants: "header" (legacy inline dropdown, opens below) and "rail" (used in the left
|
|
|
|
|
// nav's bottom icon cluster — an icon-only button whose menu is portaled to <body> and
|
|
|
|
|
// anchored to the right + above the button, escaping the nav's backdrop-filter which would
|
|
|
|
|
// otherwise trap an absolutely-positioned popover).
|
2026-06-15 00:30:34 +02:00
|
|
|
export default function LanguageSwitcher({
|
|
|
|
|
value,
|
|
|
|
|
onChange,
|
|
|
|
|
align = "right",
|
2026-06-17 14:28:29 +02:00
|
|
|
variant = "header",
|
2026-06-15 00:30:34 +02:00
|
|
|
}: {
|
|
|
|
|
value: LangCode;
|
|
|
|
|
onChange: (code: LangCode) => void;
|
|
|
|
|
align?: "left" | "right";
|
2026-06-17 14:28:29 +02:00
|
|
|
variant?: "header" | "rail";
|
2026-06-15 00:30:34 +02:00
|
|
|
}) {
|
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
|
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
2026-06-17 14:28:29 +02:00
|
|
|
const btnRef = useRef<HTMLButtonElement | null>(null);
|
|
|
|
|
const panelRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
|
const [pos, setPos] = useState<{ left: number; bottom: number }>({ left: 0, bottom: 0 });
|
2026-06-15 00:30:34 +02:00
|
|
|
const current = LANGUAGES.find((l) => l.code === value) ?? LANGUAGES[0];
|
|
|
|
|
|
|
|
|
|
function openNow() {
|
|
|
|
|
if (closeTimer.current) clearTimeout(closeTimer.current);
|
|
|
|
|
setOpen(true);
|
|
|
|
|
}
|
|
|
|
|
function closeSoon() {
|
|
|
|
|
closeTimer.current = setTimeout(() => setOpen(false), 200);
|
|
|
|
|
}
|
2026-06-17 14:28:29 +02:00
|
|
|
function toggleRail() {
|
|
|
|
|
if (!open) {
|
|
|
|
|
const r = btnRef.current?.getBoundingClientRect();
|
|
|
|
|
if (r) setPos({ left: r.right + 8, bottom: window.innerHeight - r.bottom });
|
|
|
|
|
}
|
|
|
|
|
setOpen((o) => !o);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Rail popover: dismiss on outside click / Escape (it's portaled, so a contains() check
|
|
|
|
|
// spans both the button and the floating panel).
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (variant !== "rail" || !open) return;
|
|
|
|
|
function onDoc(e: MouseEvent) {
|
|
|
|
|
const target = e.target as Node;
|
|
|
|
|
if (panelRef.current?.contains(target) || btnRef.current?.contains(target)) return;
|
|
|
|
|
setOpen(false);
|
|
|
|
|
}
|
|
|
|
|
function onKey(e: KeyboardEvent) {
|
|
|
|
|
if (e.key === "Escape") setOpen(false);
|
|
|
|
|
}
|
|
|
|
|
document.addEventListener("mousedown", onDoc);
|
|
|
|
|
document.addEventListener("keydown", onKey);
|
|
|
|
|
return () => {
|
|
|
|
|
document.removeEventListener("mousedown", onDoc);
|
|
|
|
|
document.removeEventListener("keydown", onKey);
|
|
|
|
|
};
|
|
|
|
|
}, [variant, open]);
|
|
|
|
|
|
|
|
|
|
const menu = (
|
|
|
|
|
<div
|
|
|
|
|
ref={panelRef}
|
|
|
|
|
className="glass-menu w-40 rounded-xl p-1.5 animate-[popIn_0.16s_ease]"
|
|
|
|
|
>
|
|
|
|
|
{LANGUAGES.map((l) => (
|
|
|
|
|
<button
|
|
|
|
|
key={l.code}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
onChange(l.code);
|
|
|
|
|
setOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
|
|
|
|
>
|
|
|
|
|
<span>{l.label}</span>
|
|
|
|
|
{l.code === value && <Check className="w-4 h-4 text-accent" />}
|
|
|
|
|
</button>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (variant === "rail") {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<button
|
|
|
|
|
ref={btnRef}
|
|
|
|
|
onClick={toggleRail}
|
|
|
|
|
title={current.label}
|
|
|
|
|
aria-label={current.label}
|
2026-07-01 22:50:59 +02:00
|
|
|
className="relative p-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
2026-06-17 14:28:29 +02:00
|
|
|
>
|
|
|
|
|
<Globe className="w-5 h-5" />
|
2026-07-01 22:50:59 +02:00
|
|
|
{/* Current-language badge (HU/EN/DE) so the active language reads at a glance without
|
|
|
|
|
opening the menu. The ring matches the page background to detach it from the icon. */}
|
|
|
|
|
<span className="absolute -bottom-1 -right-1 text-[8px] font-bold leading-none px-1 py-[1px] rounded bg-accent text-accent-fg ring-2 ring-bg">
|
|
|
|
|
{current.code.toUpperCase()}
|
|
|
|
|
</span>
|
2026-06-17 14:28:29 +02:00
|
|
|
</button>
|
|
|
|
|
{open &&
|
|
|
|
|
createPortal(
|
|
|
|
|
<div style={{ position: "fixed", left: pos.left, bottom: pos.bottom, zIndex: 40 }}>
|
|
|
|
|
{menu}
|
|
|
|
|
</div>,
|
|
|
|
|
document.body
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
2026-06-15 00:30:34 +02:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="relative" onMouseEnter={openNow} onMouseLeave={closeSoon}>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => setOpen((o) => !o)}
|
|
|
|
|
title={current.label}
|
|
|
|
|
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-card transition"
|
|
|
|
|
>
|
|
|
|
|
<Globe className="w-4 h-4" />
|
|
|
|
|
<span className="text-xs font-semibold uppercase">{current.code}</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{open && (
|
|
|
|
|
<div
|
2026-06-16 01:39:56 +02:00
|
|
|
className={`glass-menu absolute ${
|
2026-06-15 00:30:34 +02:00
|
|
|
align === "right" ? "right-0" : "left-0"
|
|
|
|
|
} mt-1 w-40 rounded-xl p-1.5 z-40 animate-[popIn_0.16s_ease]`}
|
|
|
|
|
>
|
|
|
|
|
{LANGUAGES.map((l) => (
|
|
|
|
|
<button
|
|
|
|
|
key={l.code}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
onChange(l.code);
|
|
|
|
|
setOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
|
|
|
|
>
|
|
|
|
|
<span>{l.label}</span>
|
|
|
|
|
{l.code === value && <Check className="w-4 h-4 text-accent" />}
|
|
|
|
|
</button>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
