clean code and styling fix

deriv-com · May 29, 2024 · 1076761 · 1076761
1 parent 9db8f0c
commit 1076761
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 66 deletions.
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -15,19 +15,10 @@ export function useNavbarItems() {
   return useThemeConfig().navbar.items;
 }
 
-export default function CustomMobileSidebar() {
-  const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false);
-  const mobileSidebar = useNavbarMobileSidebar();
-  const items = useNavbarItems();
-  const [leftItems] = splitNavbarItems(items);
-  const { pathname, search, hash } = useLocation();
-
-  const {
-    i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs },
-  } = useDocusaurusContext();
-
-  const replaceLocale = (path, newLocale) => {
-    const segments = path.split('/').filter(Boolean);
+const replaceLocale = (path, newLocale, locales) => {
+  const segments = path.split('/').filter(Boolean);
+  const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en';
+  if (newLocale) {
     if (locales.includes(segments[0])) {
       if (newLocale === 'en') {
         segments.shift();
@@ -37,31 +28,41 @@ export default function CustomMobileSidebar() {
     } else if (newLocale !== 'en') {
       segments.unshift(newLocale);
     }
-    return '/' + segments.join('/');
+    console.log('newLocale', newLocale);
+  }
+  return {
+    newPath: '/' + segments.join('/'),
+    currentLocale,
   };
+};
 
-  const [selectedLocale, setSelectedLocale] = React.useState('en');
+export default function CustomMobileSidebar() {
+  const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false);
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems] = splitNavbarItems(items);
+  const { pathname, search, hash } = useLocation();
+  const {
+    i18n: { locales, localeConfigs },
+  } = useDocusaurusContext();
+  const { currentLocale } = replaceLocale(pathname, null, locales);
+  const [selectedLocale, setSelectedLocale] = React.useState(currentLocale);
 
   useEffect(() => {
-    if (pathname) {
-      pathname.split('/').forEach((path) => {
-        if (locales.includes(path)) {
-          setSelectedLocale(path);
-        }
-      });
-    }
+    const { currentLocale } = replaceLocale(pathname, null, locales);
+    setSelectedLocale(currentLocale);
+    console.log('currentLocale', currentLocale);
   }, [pathname]);
 
   const localeItems = locales.map((locale) => {
-    const newPathname = replaceLocale(pathname, locale);
+    const { newPath } = replaceLocale(pathname, locale, locales);
     return {
       label: localeConfigs[locale].label,
       lang: locale,
-      to: `${newPathname}${search}${hash}`,
+      to: `${newPath}${search}${hash}`,
       className: classnames({ 'dropdown__link--active': locale === selectedLocale }),
       onClick: () => {
-        window.history.pushState(null, '', `${newPathname}${search}${hash}`);
-        setSelectedLocale(locale);
+        window.history.pushState(null, '', `${newPath}${search}${hash}`);
       },
     };
   });

diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss
@@ -15,6 +15,10 @@
       cursor: pointer;
     }
 
+    .navbar__item.navbar__link {
+      color: var(--core-color-solid-slate-1400, #000);
+    }
+
     .language_sidebar {
       position: fixed;
       top: 0;
@@ -51,14 +55,14 @@
         font-size: 16px;
         font-weight: 400;
         line-height: 24px;
-        color: rgba(0, 0, 0, 0.72) !important;
+        color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important;
         text-decoration: none;
-        background-color: white;
+        background-color: var(--ifm-navbar-background-color);
 
         &:hover,
         &:active,
         &.dropdown__link--active {
-          color: var(--colors-coral500) !important;
+          color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important;
         }
       }
     }

diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -6,29 +6,11 @@ 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: { locales, localeConfigs },
-  } = useDocusaurusContext();
-  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('/').filter(Boolean);
+const replaceLocale = (path, newLocale, locales) => {
+  const segments = path.split('/').filter(Boolean);
+  const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en';
+  if (newLocale) {
     if (locales.includes(segments[0])) {
       if (newLocale === 'en') {
         segments.shift();
@@ -38,11 +20,33 @@ export default function LocaleDropdownNavbarItem({
     } else if (newLocale !== 'en') {
       segments.unshift(newLocale);
     }
-    return '/' + segments.join('/');
+    console.log('newLocale', newLocale);
+  }
+  return {
+    newPath: '/' + segments.join('/'),
+    currentLocale,
   };
+};
+
+export default function LocaleDropdownNavbarItem({
+  dropdownItemsBefore = [],
+  dropdownItemsAfter = [],
+  ...props
+}: Props): JSX.Element {
+  const {
+    i18n: { locales, localeConfigs },
+  } = useDocusaurusContext();
+  const { pathname, search, hash } = useLocation();
+  const { newPath, currentLocale } = replaceLocale(pathname, null, locales);
+  const [selectedLocale, setSelectedLocale] = React.useState(currentLocale);
+
+  useEffect(() => {
+    const { currentLocale } = replaceLocale(pathname, null, locales);
+    setSelectedLocale(currentLocale);
+  }, [pathname]);
 
   const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
-    const newPath = replaceLocale(pathname, locale);
+    const { newPath } = replaceLocale(pathname, locale, locales);
     return {
       label: localeConfigs[locale].label,
       lang: localeConfigs[locale].htmlLang,
@@ -55,6 +59,7 @@ export default function LocaleDropdownNavbarItem({
       },
     };
   });
+
   const getShortNames = (locale) => {
     switch (locale) {
       case 'en':
@@ -69,8 +74,10 @@ export default function LocaleDropdownNavbarItem({
         return 'EN';
     }
   };
+
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
   const dropdownLabel = getShortNames(selectedLocale);
+
   return (
     <div className='language_switcher'>
       <DropdownNavbarItem {...props} label={<>{dropdownLabel}</>} items={items} />

diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss
@@ -7,10 +7,14 @@
     display: none;
   }
 
+  a.navbar__link {
+    color: var(--core-color-solid-slate-1400, #000) !important;
+  }
+
   .dropdown__menu {
     position: fixed;
     display: flex;
-    top: 93px !important;
+    top: 90px !important;
     left: 0px;
     padding-right: 5.5%;
     width: 100vw;
@@ -63,20 +67,12 @@
     font-size: 16px;
     font-weight: normal;
     margin-top: 15px;
-  }
-
-  .dropdown:hover {
-    .navbar__link {
-      color: var(--colors-coral500);
-    }
+    color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important;
+    background-color: var(--ifm-navbar-background-color);
   }
 
   .dropdown__link--active {
-    color: var(--colors-coral500);
-    background-color: var(--colors-greyLight100);
-  }
-
-  .dropdown__link--active:hover {
-    color: var(--colors-coral500);
+    color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important;
+    background-color: var(--ifm-navbar-background-color);
   }
 }