feat: add new language switcher

inertia/components/common/mantine_language_switcher.tsx

@@ -0,0 +1,17 @@
+import { ActionIcon, Image } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+export function MantineLanguageSwitcher() {
+	const { i18n } = useTranslation();
+	const newLanguage = i18n.language === 'en' ? 'fr' : 'en';
+	return (
+		<ActionIcon
+			variant="light"
+			aria-label="Toggle color scheme"
+			onClick={() => i18n.changeLanguage(newLanguage)}
+			size="lg"
+		>
+			<Image src={`/icons/${newLanguage}.svg`} alt={newLanguage} w={18} />
+		</ActionIcon>
+	);
+}

inertia/components/navbar/mantine_navbar.tsx

@@ -15,6 +15,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
+import { MantineLanguageSwitcher } from '~/components/common/mantine_language_switcher';
 import { MantineThemeSwitcher } from '~/components/common/mantine_theme_switcher';
 import classes from './mobile_navbar.module.css';
 
@@ -43,10 +44,12 @@ export default function MantineNavbar() {
 
 					<Group gap="xs">
 						<MantineThemeSwitcher />
+						<MantineLanguageSwitcher />
 						<Button
 							component={Link}
 							href={route('auth.login').url}
 							visibleFrom="sm"
+							w={110}
 						>
 							{t('login')}
 						</Button>