Fix language menu position by portaling out of sidebar overflow.
Local Build and Deploy / deploy (push) Successful in 1m16s
Local Build and Deploy / deploy (push) Successful in 1m16s
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
b78d691281
commit
ce8c3503e9
1 file changed
+183
-114
@@ -4,7 +4,15 @@ import { Check, ChevronDown, Search } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useEffect, useMemo, useRef, useState, useTransition } from "react";
|
||||
import {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
useTransition,
|
||||
} from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { setLocaleCookie } from "@/actions/set-locale";
|
||||
|
||||
const LOCALES: { code: string; label: string; lang: string }[] = [
|
||||
@@ -32,6 +40,10 @@ const LOCALES: { code: string; label: string; lang: string }[] = [
|
||||
{ code: "ru", label: "Русский", lang: "ru" },
|
||||
];
|
||||
|
||||
const MENU_WIDTH = 224; // w-56
|
||||
const MENU_GAP = 6;
|
||||
const VIEWPORT_PAD = 8;
|
||||
|
||||
export function LanguageSwitcher({
|
||||
variant = "nav",
|
||||
}: {
|
||||
@@ -42,7 +54,12 @@ export function LanguageSwitcher({
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(
|
||||
null,
|
||||
);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
|
||||
const isAdmin = variant === "admin";
|
||||
@@ -59,13 +76,54 @@ export function LanguageSwitcher({
|
||||
}, [search]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!open) {
|
||||
setMenuPos(null);
|
||||
return;
|
||||
}
|
||||
|
||||
function place() {
|
||||
const trigger = triggerRef.current;
|
||||
if (!trigger) return;
|
||||
const rect = trigger.getBoundingClientRect();
|
||||
const maxLeft = window.innerWidth - MENU_WIDTH - VIEWPORT_PAD;
|
||||
const left = Math.min(
|
||||
Math.max(VIEWPORT_PAD, rect.right - MENU_WIDTH),
|
||||
Math.max(VIEWPORT_PAD, maxLeft),
|
||||
);
|
||||
setMenuPos({ top: rect.bottom + MENU_GAP, left });
|
||||
}
|
||||
|
||||
place();
|
||||
window.addEventListener("resize", place);
|
||||
window.addEventListener("scroll", place, true);
|
||||
return () => {
|
||||
window.removeEventListener("resize", place);
|
||||
window.removeEventListener("scroll", place, true);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node))
|
||||
setOpen(false);
|
||||
const t = e.target as Node;
|
||||
if (triggerRef.current?.contains(t) || menuRef.current?.contains(t))
|
||||
return;
|
||||
setOpen(false);
|
||||
}
|
||||
function handleKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
document.addEventListener("keydown", handleKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClick);
|
||||
document.removeEventListener("keydown", handleKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
@@ -88,9 +146,126 @@ export function LanguageSwitcher({
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
const menu = open && menuPos && mounted && (
|
||||
<div
|
||||
ref={menuRef}
|
||||
role="listbox"
|
||||
aria-label="Languages"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: menuPos.top,
|
||||
left: menuPos.left,
|
||||
width: MENU_WIDTH,
|
||||
zIndex: 200,
|
||||
}}
|
||||
className={
|
||||
isAdmin
|
||||
? "overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] text-[var(--admin-text)] shadow-xl"
|
||||
: "dropdown-menu overflow-hidden rounded-xl z-50 shadow-xl"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
isAdmin
|
||||
? "border-b border-[var(--admin-border)] p-2"
|
||||
: "border-b border-black/10 dark:border-white/10 p-2"
|
||||
}
|
||||
>
|
||||
<label
|
||||
className={
|
||||
isAdmin
|
||||
? "flex min-w-0 items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2.5 py-1.5"
|
||||
: "flex min-w-0 items-center gap-2 rounded-lg border bg-background px-2.5 py-1.5"
|
||||
}
|
||||
>
|
||||
<Search
|
||||
className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
|
||||
aria-hidden
|
||||
/>
|
||||
<input
|
||||
ref={searchRef}
|
||||
type="text"
|
||||
placeholder="Search…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
aria-label="Search languages"
|
||||
className={
|
||||
isAdmin
|
||||
? "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-[var(--admin-text)] outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0 placeholder:text-[var(--admin-text-muted)]"
|
||||
: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0"
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="max-h-64 overflow-y-auto overscroll-contain p-1.5">
|
||||
{filtered.length === 0 && (
|
||||
<p
|
||||
className={`px-2 py-6 text-center text-xs ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
|
||||
>
|
||||
No languages found
|
||||
</p>
|
||||
)}
|
||||
{filtered.map((l) => {
|
||||
const selected = l.code === locale;
|
||||
return (
|
||||
<button
|
||||
key={l.code}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
onClick={() => switchLocale(l.code)}
|
||||
className={
|
||||
isAdmin
|
||||
? `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors border-0 cursor-pointer ${
|
||||
selected
|
||||
? "bg-[var(--admin-accent)]/18 text-[var(--admin-accent)] font-semibold"
|
||||
: "bg-transparent text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/10"
|
||||
}`
|
||||
: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm font-medium transition-colors border-0 cursor-pointer ${
|
||||
selected
|
||||
? "opacity-100"
|
||||
: "opacity-70 hover:opacity-100"
|
||||
}`
|
||||
}
|
||||
style={
|
||||
isAdmin
|
||||
? undefined
|
||||
: {
|
||||
color: "var(--color-text-readable, var(--color-text))",
|
||||
background: selected
|
||||
? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
|
||||
: "transparent",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={`/assets/images/icons/flags/${l.code}.png`}
|
||||
alt=""
|
||||
width={16}
|
||||
height={16}
|
||||
className="inline-block h-4 w-auto shrink-0"
|
||||
/>
|
||||
<span className="min-w-0 flex-1 truncate">{l.label}</span>
|
||||
{selected ? (
|
||||
<Check
|
||||
className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-accent)]" : "opacity-80"}`}
|
||||
aria-hidden
|
||||
/>
|
||||
) : (
|
||||
<span className="w-3.5 shrink-0" aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<div className="relative">
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
disabled={pending}
|
||||
@@ -118,113 +293,7 @@ export function LanguageSwitcher({
|
||||
/>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
role="listbox"
|
||||
aria-label="Languages"
|
||||
className={
|
||||
isAdmin
|
||||
? "absolute right-0 top-full mt-1.5 z-50 w-56 overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] text-[var(--admin-text)] shadow-xl"
|
||||
: "dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 w-56 overflow-hidden rounded-xl z-50"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
isAdmin
|
||||
? "border-b border-[var(--admin-border)] p-2"
|
||||
: "border-b border-black/10 dark:border-white/10 p-2"
|
||||
}
|
||||
>
|
||||
<label
|
||||
className={
|
||||
isAdmin
|
||||
? "flex min-w-0 items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2.5 py-1.5"
|
||||
: "flex min-w-0 items-center gap-2 rounded-lg border bg-background px-2.5 py-1.5"
|
||||
}
|
||||
>
|
||||
<Search
|
||||
className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
|
||||
aria-hidden
|
||||
/>
|
||||
<input
|
||||
ref={searchRef}
|
||||
type="text"
|
||||
placeholder="Search…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
aria-label="Search languages"
|
||||
className={
|
||||
isAdmin
|
||||
? "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-[var(--admin-text)] outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0 placeholder:text-[var(--admin-text-muted)]"
|
||||
: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0"
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="max-h-64 overflow-y-auto overscroll-contain p-1.5">
|
||||
{filtered.length === 0 && (
|
||||
<p
|
||||
className={`px-2 py-6 text-center text-xs ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
|
||||
>
|
||||
No languages found
|
||||
</p>
|
||||
)}
|
||||
{filtered.map((l) => {
|
||||
const selected = l.code === locale;
|
||||
return (
|
||||
<button
|
||||
key={l.code}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
onClick={() => switchLocale(l.code)}
|
||||
className={
|
||||
isAdmin
|
||||
? `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors border-0 cursor-pointer ${
|
||||
selected
|
||||
? "bg-[var(--admin-accent)]/18 text-[var(--admin-accent)] font-semibold"
|
||||
: "bg-transparent text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/10"
|
||||
}`
|
||||
: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm font-medium transition-colors border-0 cursor-pointer ${
|
||||
selected
|
||||
? "opacity-100"
|
||||
: "opacity-70 hover:opacity-100"
|
||||
}`
|
||||
}
|
||||
style={
|
||||
isAdmin
|
||||
? undefined
|
||||
: {
|
||||
color: "var(--color-text-readable, var(--color-text))",
|
||||
background: selected
|
||||
? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
|
||||
: "transparent",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={`/assets/images/icons/flags/${l.code}.png`}
|
||||
alt=""
|
||||
width={16}
|
||||
height={16}
|
||||
className="inline-block h-4 w-auto shrink-0"
|
||||
/>
|
||||
<span className="min-w-0 flex-1 truncate">{l.label}</span>
|
||||
{selected ? (
|
||||
<Check
|
||||
className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-accent)]" : "opacity-80"}`}
|
||||
aria-hidden
|
||||
/>
|
||||
) : (
|
||||
<span className="w-3.5 shrink-0" aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{mounted && menu ? createPortal(menu, document.body) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user