Add locale picker to app header

Author: jc21

frontend/src/components/LocalePicker.tsx

@@ -3,6 +3,7 @@ import {
 	Box,
 	Menu,
 	MenuButton,
+	MenuButtonProps,
 	MenuList,
 	MenuItem,
 } from "@chakra-ui/react";
@@ -16,29 +17,30 @@ import {
 } from "locale";
 
 interface LocalPickerProps {
-	/**
-	 * On change handler
-	 */
 	onChange?: any;
-	/**
-	 * Class
-	 */
 	className?: string;
+	background?: "normal" | "transparent";
 }
 
-function LocalePicker({ onChange, className }: LocalPickerProps) {
+function LocalePicker({ onChange, className, background }: LocalPickerProps) {
 	const { locale, setLocale } = useLocaleState();
 
+	const additionalProps: Partial<MenuButtonProps> = {};
+	if (background === "transparent") {
+		additionalProps["backgroundColor"] = "transparent";
+	}
+
 	const changeTo = (lang: string) => {
 		changeLocale(lang);
 		setLocale(lang);
 		onChange && onChange(locale);
+		___location.reload();
 	};
 
 	return (
 		<Box className={className}>
 			<Menu>
-				<MenuButton as={Button}>
+				<MenuButton as={Button} {...additionalProps}>
 					<Flag countryCode={getFlagCodeForLocale(locale)} />
 				</MenuButton>
 				<MenuList>

frontend/src/components/Navigation/NavigationHeader.tsx

@@ -17,7 +17,7 @@ import {
 	useColorModeValue,
 	useDisclosure,
 } from "@chakra-ui/react";
-import { ThemeSwitcher } from "components";
+import { LocalePicker, ThemeSwitcher } from "components";
 import { useAuthState } from "context";
 import { useUser } from "hooks";
 import { intl } from "locale";
@@ -67,6 +67,7 @@ function NavigationHeader({
 					</HStack>
 					<HStack>
 						<ThemeSwitcher background="transparent" />
+						<LocalePicker className="text-right" background="transparent" />
 						<Box pl={2}>
 							<Menu>
 								<MenuButton