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 && ( + {lang.value} 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 }