fixed language switching in the frontend

resources/js/i18n.ts

@@ -1,22 +1,29 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
-i18n.on('languageChanged', (lng) => {
-  console.log('i18n languageChanged event:', lng);
-  console.trace('languageChanged trace for', lng);
-});
+const supportedLngs = ['de', 'en'];
+const fallbackLng = 'de';
+
+const detection = {
+  order: ['path', 'localStorage', 'cookie', 'htmlTag', 'navigator'],
+  lookupFromPathIndex: 0,
+  caches: ['localStorage'],
+};
 
 i18n
   .use(Backend)
+  .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    lng: localStorage.getItem('i18nextLng') || 'de',
-    fallbackLng: 'de',
-    supportedLngs: ['de', 'en'],
+    fallbackLng,
+    supportedLngs,
     ns: ['marketing', 'auth', 'common', 'legal'],
     defaultNS: 'marketing',
     debug: import.meta.env.DEV,
+    load: 'languageOnly',
+    detection,
     interpolation: {
       escapeValue: false,
     },
@@ -32,4 +39,4 @@ i18n
     },
   });
 
-export default i18n;
+export default i18n;