Add new section with theme and locale pickers.

Author: 7heMech

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

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"