feat: add LanguageSwitcherMobile

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 (
+    <div className='flex flex-row'>
+      {languages.map(
+        (lang) =>
+          !lang.disabled && (
+            <Image
+              key={lang.value}
+              className='mx-2 hover:drop-shadow-md'
+              src={lang.flag}
+              alt={lang.value}
+              height={flagSize}
+              width={flagSize * 1.5}
+              onClick={() => handleChange(lang.value)}
+            />
+          ),
+      )}
+    </div>
+  );
+};
+
+export default LanguageSwitcherMobile;

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) => {
               >
                 <ModeToggleButton />
               </motion.li>
+              <motion.li
+                className='flex justify-center'
+                variants={navigationVariants}
+                initial='hidden'
+                animate='visible'
+                custom={0.5 + (links.length + 2) * 0.1}
+              >
+                <LanguageSwitcherMobile languages={languages} />
+              </motion.li>
             </ul>
           </FocusTrap>
         </motion.div>

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",

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": {

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
   }