From f40fe56572989a1aca580e33e4bbf4f4022d5969 Mon Sep 17 00:00:00 2001
From: 7heMech <83923848+7heMech@users.noreply.github.com>
Date: Thu, 13 Nov 2025 01:40:34 +0200
Subject: [PATCH] Add new section with theme and locale pickers.

---
 frontend/src/components/LocalePicker.tsx | 11 +++++++++--
 frontend/src/components/SiteHeader.tsx   | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/LocalePicker.tsx b/frontend/src/components/LocalePicker.tsx
index aaa1dc53..5ee44c1e 100644
--- a/frontend/src/components/LocalePicker.tsx
+++ b/frontend/src/components/LocalePicker.tsx
@@ -5,7 +5,11 @@ import { useTheme } from "src/hooks";
 import { changeLocale, getFlagCodeForLocale, localeOptions, T } from "src/locale";
 import styles from "./LocalePicker.module.css";
 
-function LocalePicker() {
+interface Props {
+	menuAlign?: "start" | "end";
+}
+
+function LocalePicker({ menuAlign = "start" }: Props) {
 	const { locale, setLocale } = useLocaleState();
 	const { getTheme } = useTheme();
 
@@ -23,7 +27,10 @@ function LocalePicker() {
 			<button type="button" className={cns} data-bs-toggle="dropdown">
 				<Flag countryCode={getFlagCodeForLocale(locale)} />
 			</button>
-			<div className="dropdown-menu">
+			<div className={cn("dropdown-menu", {
+				"dropdown-menu-end": menuAlign === "end",
+			})}
+			>
 				{localeOptions.map((item) => {
 					return (
 						<a
diff --git a/frontend/src/components/SiteHeader.tsx b/frontend/src/components/SiteHeader.tsx
index b54191e1..3c2cea77 100644
--- a/frontend/src/components/SiteHeader.tsx
+++ b/frontend/src/components/SiteHeader.tsx
@@ -70,6 +70,23 @@ export function SiteHeader() {
 								</div>
 							</a>
 							<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+								<div className="d-md-none">
+									<div className="p-2 pb-1 pe-1" onClick={(e) => e.stopPropagation()}>
+										<div className="d-flex align-items-center">
+											<div className="ps-2 pe-1 me-auto">
+												<div>{currentUser?.nickname}</div>
+												<div className="mt-1 small text-secondary">
+													<T id={isAdmin ? "role.admin" : "role.standard-user"} />
+												</div>
+											</div>
+											<div className="d-flex align-items-center">
+												<ThemeSwitcher className="me-n1" />
+												<LocalePicker menuAlign="end" />
+											</div>
+										</div>
+									</div>
+									<div className="dropdown-divider" />
+								</div>
 								<a
 									href="?"
 									className="dropdown-item"