+ {/* Language selector */}
+
+
{/* Theme toggle */}
@@ -185,7 +193,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
diff --git a/src/shared/components/LanguageSelector.tsx b/src/shared/components/LanguageSelector.tsx
new file mode 100644
index 0000000000..416f43db21
--- /dev/null
+++ b/src/shared/components/LanguageSelector.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { LANGUAGES, LOCALE_COOKIE } from "@/i18n/config";
+import type { Locale } from "@/i18n/config";
+import { useLocale } from "next-intl";
+
+/** Persist locale preference in cookie + localStorage (outside component scope for ESLint) */
+function persistLocale(code: Locale) {
+ document.cookie = `${LOCALE_COOKIE}=${code};path=/;max-age=${365 * 24 * 60 * 60};samesite=lax`;
+ try {
+ localStorage.setItem(LOCALE_COOKIE, code);
+ } catch {
+ // Ignore
+ }
+}
+
+export default function LanguageSelector() {
+ const locale = useLocale();
+ const router = useRouter();
+ const [open, setOpen] = useState(false);
+ const ref = useRef
(null);
+
+ const currentLang = LANGUAGES.find((l) => l.code === locale) || LANGUAGES[0];
+
+ // Close dropdown on outside click
+ useEffect(() => {
+ const handler = (e: MouseEvent) => {
+ if (ref.current && !ref.current.contains(e.target as Node)) {
+ setOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handler);
+ return () => document.removeEventListener("mousedown", handler);
+ }, []);
+
+ const handleSelect = (code: Locale) => {
+ if (code === locale) {
+ setOpen(false);
+ return;
+ }
+
+ persistLocale(code);
+ setOpen(false);
+ router.refresh();
+ };
+
+ return (
+
+ {/* Trigger button */}
+
+
+ {/* Dropdown */}
+ {open && (
+
+ {LANGUAGES.map((lang) => (
+
+ ))}
+
+ )}
+