Language Fix

deriv-com · May 28, 2024 · c639a14 · c639a14
1 parent eae951a
commit c639a14
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 33 deletions.
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common';
 import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import NavbarItem from '@theme/NavbarItem';
@@ -21,24 +21,12 @@ export default function CustomMobileSidebar() {
   const items = useNavbarItems();
   const [leftItems] = splitNavbarItems(items);
   const { pathname, search, hash } = useLocation();
-  const pathSegments = pathname.split('/').filter(Boolean);
-  const currentLocale = pathSegments[0];
-
-  React.useEffect(() => {
-    if (!mobileSidebar?.shown) {
-      setLanguageSidebarVisible(false);
-    }
-  }, [mobileSidebar]);
-
-  const toggleLanguageSidebar = () => {
-    setLanguageSidebarVisible(!languageSidebarVisible);
-  };
 
   const {
     i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs },
   } = useDocusaurusContext();
 
-  const replaceLocaleInPath = (path, newLocale) => {
+  const replaceLocale = (path, newLocale) => {
     const segments = path.split('/').filter(Boolean);
     if (locales.includes(segments[0])) {
       if (newLocale === 'en') {
@@ -52,22 +40,32 @@ export default function CustomMobileSidebar() {
     return '/' + segments.join('/');
   };
 
+  const [selectedLocale, setSelectedLocale] = React.useState('en');
+
+  useEffect(() => {
+    if (pathname) {
+      pathname.split('/').forEach((path) => {
+        if (locales.includes(path)) {
+          setSelectedLocale(path);
+        }
+      });
+    }
+  }, [pathname]);
+
   const localeItems = locales.map((locale) => {
-    const newPathname = replaceLocaleInPath(pathname, locale);
+    const newPathname = replaceLocale(pathname, locale);
     return {
       label: localeConfigs[locale].label,
       lang: locale,
       to: `${newPathname}${search}${hash}`,
-      className: classnames({ 'dropdown__link--active': locale === currentLocale }),
-      onClick: () => handleLocaleChange(locale),
+      className: classnames({ 'dropdown__link--active': locale === selectedLocale }),
+      onClick: () => {
+        window.history.pushState(null, '', `${newPathname}${search}${hash}`);
+        setSelectedLocale(locale);
+      },
     };
   });
 
-  const handleLocaleChange = (newLocale) => {
-    const newPathname = replaceLocaleInPath(pathname, newLocale);
-    window.history.pushState(null, '', newPathname);
-  };
-
   const getShortNames = (locale) => {
     switch (locale) {
       case 'en':
@@ -83,7 +81,11 @@ export default function CustomMobileSidebar() {
     }
   };
 
-  const dropdownLabel = getShortNames(currentLocaleCtx);
+  const dropdownLabel = getShortNames(selectedLocale);
+
+  const toggleLanguageSidebar = () => {
+    setLanguageSidebarVisible(!languageSidebarVisible);
+  };
 
   return (
     <React.Fragment>

diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -1,23 +1,31 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
 import { useLocation } from '@docusaurus/router';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
 import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 import classnames from 'classnames';
 import './locale-dropdown-navbar-item.scss';
-
 export default function LocaleDropdownNavbarItem({
   dropdownItemsBefore = [],
   dropdownItemsAfter = [],
   ...props
 }: Props): JSX.Element {
   const {
-    i18n: { currentLocale, locales, localeConfigs },
+    i18n: { locales, localeConfigs },
   } = useDocusaurusContext();
-  const alternatePageUtils = useAlternatePageUtils();
   const { pathname, search, hash } = useLocation();
+  const [selectedLocale, setSelectedLocale] = React.useState('en');
+
+  useEffect(() => {
+    if (pathname) {
+      pathname.split('/').forEach((path) => {
+        if (locales.includes(path)) {
+          setSelectedLocale(path);
+        }
+      });
+    }
+  }, [pathname, selectedLocale]);
 
   const replaceLocale = (path, newLocale) => {
     const segments = path.split('/');
@@ -41,10 +49,12 @@ export default function LocaleDropdownNavbarItem({
       to: `${newPath}${search}${hash}`,
       target: '_self',
       autoAddBaseUrl: false,
-      className: classnames({ 'dropdown__link--active': locale === currentLocale }),
+      className: classnames({ 'dropdown__link--active': locale === selectedLocale }),
+      onClick: () => {
+        window.history.pushState(null, '', `${newPath}${search}${hash}`);
+      },
     };
   });
-
   const getShortNames = (locale) => {
     switch (locale) {
       case 'en':
@@ -59,10 +69,8 @@ export default function LocaleDropdownNavbarItem({
         return 'EN';
     }
   };
-
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
-  const dropdownLabel = getShortNames(currentLocale);
-
+  const dropdownLabel = getShortNames(selectedLocale);
   return (
     <div className='language_switcher'>
       <DropdownNavbarItem {...props} label={<>{dropdownLabel}</>} items={items} />