diff --git a/src/components/atoms/LanguageSwitcher/LanguageSwitcherMobile.tsx b/src/components/atoms/LanguageSwitcher/LanguageSwitcherMobile.tsx
new file mode 100644
index 0000000..a74cbad
--- /dev/null
+++ b/src/components/atoms/LanguageSwitcher/LanguageSwitcherMobile.tsx
@@ -0,0 +1,53 @@
+import Image from 'next/image';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+import i18n from '@/app/(public)/i18n';
+
+export interface LanguageSwitcherProps {
+ languages: LanguageDef[];
+}
+
+export interface LanguageDef {
+ label: string;
+ value: string;
+ flag: string;
+ disabled?: boolean;
+}
+
+const LanguageSwitcherMobile = ({ languages }: LanguageSwitcherProps) => {
+ const [_, setMounted] = useState(false);
+
+ // When mounted on client, now we can show the UI
+ useEffect(() => setMounted(true), []);
+
+ const [__, setChosenLanguage] = useState('');
+
+ const handleChange = (newLang: string) => {
+ setChosenLanguage(newLang);
+ i18n.changeLanguage(newLang);
+ };
+
+ const flagSize = 20;
+
+ return (
+
+ {languages.map(
+ (lang) =>
+ !lang.disabled && (
+ handleChange(lang.value)}
+ />
+ ),
+ )}
+
+ );
+};
+
+export default LanguageSwitcherMobile;
diff --git a/src/components/molecules/MobileMenu/MobileMenu.tsx b/src/components/molecules/MobileMenu/MobileMenu.tsx
index 547211d..36f7bec 100644
--- a/src/components/molecules/MobileMenu/MobileMenu.tsx
+++ b/src/components/molecules/MobileMenu/MobileMenu.tsx
@@ -5,10 +5,13 @@ import { AnimatePresence, motion } from 'framer-motion';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
+import LanguageSwitcherMobile from '@/components/atoms/LanguageSwitcher/LanguageSwitcherMobile';
import { NavigationItem } from '@/components/atoms/NavigationItem';
import ModeToggleButton from '@/components/buttons/ModeToggleButton';
import { links } from '@/components/layout/Header';
+import languages from '@/locales/languages.json';
+
export interface MobileMenuProps {
isOpen: boolean;
}
@@ -66,6 +69,15 @@ export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
>
+
+
+
diff --git a/src/locales/en.json b/src/locales/en.json
index 42353a9..5cb0389 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,9 +2,9 @@
"headerMenu": {
"about": "About",
"aboutWork": "Work & Career",
- "aboutWorkMobile": "About - Work & Career",
+ "aboutWorkMobile": "About ~ Work & Career",
"aboutFreeTime": "Free Time",
- "aboutFreeTimeMobile": "About - Free Time",
+ "aboutFreeTimeMobile": "About ~ Free Time",
"projects": "Projects",
"cv": "CV",
"uses": "Uses",
diff --git a/src/locales/it.json b/src/locales/it.json
index 41b9707..ac89960 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -1,13 +1,13 @@
{
"headerMenu": {
- "about": "Su di me",
- "aboutWork": "Carriera Lavorativa",
- "aboutWorkMobile": "Su di me - Carriera Lavorativa",
+ "about": "About",
+ "aboutWork": "Lavoro",
+ "aboutWorkMobile": "About ~ Lavoro",
"aboutFreeTime": "Tempo Libero",
- "aboutFreeTimeMobile": "Su di me - Tempo Libero",
+ "aboutFreeTimeMobile": "About ~ Tempo Libero",
"projects": "Progetti",
"cv": "CV",
- "uses": "Uses",
+ "uses": "Cose che uso",
"contact": "Contatti"
},
"footerMenu": {
diff --git a/src/locales/languages.json b/src/locales/languages.json
index 1c7aa91..0894826 100644
--- a/src/locales/languages.json
+++ b/src/locales/languages.json
@@ -1,14 +1,17 @@
[
{
"label": "🇬🇧 EN",
+ "flag": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692716604/uk_657deb6132.svg",
"value": "en"
},
{
"label": "🇮🇹 IT",
+ "flag": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692716604/it_00c57db1fb.svg",
"value": "it"
},
{
"label": "🇩🇪 DE",
+ "flag": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692716604/de_9c5221adfa.svg",
"value": "de",
"disabled": true
}