diff --git a/i18n.js b/i18n.js
index 376f28d..12d8a9d 100644
--- a/i18n.js
+++ b/i18n.js
@@ -19,6 +19,15 @@ const capitalize = {
},
};
+export const supportedLanguages = {
+ de: { name: 'Deutsch', flag: '🇩🇪' },
+ en: { name: 'English', flag: '🇬🇧' },
+ es: { name: 'Español', flag: '🇪🇸' },
+ fr: { name: 'Français', flag: '🇫🇷' },
+ it: { name: 'Italiano', flag: '🇮🇹' },
+ ru: { name: 'Русский', flag: '🇷🇺' },
+};
+
i18n
.use(HttpApi)
.use(LanguageDetector)
@@ -43,7 +52,7 @@ i18n
},
lng: navigator.language,
ns: ['auth', 'core', 'group', 'tutorial'],
- supportedLngs: ['en', 'it', 'es', 'fr', 'de', 'ru'],
+ supportedLngs: Object.keys(supportedLanguages),
});
export default i18n;
diff --git a/src/App.tsx b/src/App.tsx
index ba57d99..cfefb34 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -137,6 +137,7 @@ import { GeneralNotifications } from './components/GeneralNotifications';
import { PdfViewer } from './common/PdfViewer';
import ThemeSelector from './components/Theme/ThemeSelector.tsx';
import { useTranslation } from 'react-i18next';
+import LanguageSelector from './components/Language/LanguageSelector.tsx';
type extStates =
| 'not-authenticated'
@@ -3704,6 +3705,7 @@ function App() {
/>
)}
+
);
diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx
index 28892a9..2574f96 100644
--- a/src/ExtStates/NotAuthenticated.tsx
+++ b/src/ExtStates/NotAuthenticated.tsx
@@ -31,6 +31,7 @@ import { GlobalContext } from '../App';
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
import ThemeSelector from '../components/Theme/ThemeSelector';
import { useTranslation } from 'react-i18next';
+import LanguageSelector from '../components/Language/LanguageSelector';
const manifestData = {
version: '0.5.3',
@@ -1097,6 +1098,7 @@ export const NotAuthenticated = ({
/>
+
>
);
diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx
index d525c26..c77865c 100644
--- a/src/components/Apps/AppsHomeDesktop.tsx
+++ b/src/components/Apps/AppsHomeDesktop.tsx
@@ -15,6 +15,7 @@ import { extractComponents } from '../Chat/MessageDisplay';
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import { AppsPrivate } from './AppsPrivate';
import ThemeSelector from '../Theme/ThemeSelector';
+import LanguageSelector from '../Language/LanguageSelector';
export const AppsHomeDesktop = ({
setMode,
@@ -157,6 +158,7 @@ export const AppsHomeDesktop = ({
/>
+
>
);
diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx
index b25d206..53937ae 100644
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -8,6 +8,7 @@ import { enabledDevModeAtom } from '../atoms/global';
import { AppsIcon } from '../assets/Icons/AppsIcon';
import ThemeSelector from './Theme/ThemeSelector';
import { CoreSyncStatus } from './CoreSyncStatus';
+import LanguageSelector from './Language/LanguageSelector';
export const DesktopSideBar = ({
goToHome,
@@ -139,6 +140,7 @@ export const DesktopSideBar = ({
)}
+
);
diff --git a/src/components/Language/LanguageSelector.tsx b/src/components/Language/LanguageSelector.tsx
new file mode 100644
index 0000000..b89836d
--- /dev/null
+++ b/src/components/Language/LanguageSelector.tsx
@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { supportedLanguages } from '../../../i18n';
+import { Tooltip } from '@mui/material';
+
+const LanguageSelector = () => {
+ const { i18n } = useTranslation();
+ const [showSelect, setShowSelect] = useState(false);
+
+ const handleChange = (e) => {
+ const newLang = e.target.value;
+ i18n.changeLanguage(newLang);
+ setShowSelect(false);
+ };
+
+ const currentLang = i18n.language;
+ const { name, flag } =
+ supportedLanguages[currentLang] || supportedLanguages['en'];
+
+ return (
+
+
+ {showSelect ? (
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/src/components/Theme/ThemeSelector.tsx b/src/components/Theme/ThemeSelector.tsx
index 42b75c0..b962e1f 100644
--- a/src/components/Theme/ThemeSelector.tsx
+++ b/src/components/Theme/ThemeSelector.tsx
@@ -14,7 +14,7 @@ const ThemeSelector = () => {
bottom: '1%',
display: 'flex',
gap: '12px',
- left: '1.5vh',
+ left: '1.2vh',
position: 'absolute',
}}
>