mobile fix

src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common';
-import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+  useAlternatePageUtils,
+} from '@docusaurus/theme-common/internal';
 import NavbarItem from '@theme/NavbarItem';
 import './primary-menu.scss';
 import { Button } from '@deriv/ui';
 import {
   LabelPairedGlobeCaptionRegularIcon,
   StandaloneChevronLeftRegularIcon,
 } from '@deriv/quill-icons';
-
-import config from '@generated/docusaurus.config'; // Adjust the path as needed
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useLocation } from '@docusaurus/router';
+import classnames from 'classnames';
 
 export function useNavbarItems() {
   return useThemeConfig().navbar.items;
@@ -31,8 +36,44 @@ export default function CustomMobileSidebar() {
     setLanguageSidebarVisible(!languageSidebarVisible);
   };
 
-  // Get the available locales from Docusaurus config
-  const { locales } = config.i18n;
+  const {
+    i18n: { currentLocale, locales, localeConfigs },
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const { search, hash } = useLocation();
+
+  const localeItems = locales.map((locale) => {
+    const baseTo = `pathname:${alternatePageUtils.createUrl({
+      locale,
+      fullyQualified: false,
+    })}`;
+    const to = `${baseTo}${search}${hash}`;
+    return {
+      label: localeConfigs[locale].label,
+      lang: localeConfigs[locale].htmlLang,
+      to,
+      target: '_self',
+      autoAddBaseUrl: false,
+      className: classnames({ 'dropdown__link--active': locale === currentLocale }),
+    };
+  });
+
+  const getShortNames = (locale) => {
+    switch (locale) {
+      case 'en':
+        return 'EN';
+      case 'es':
+        return 'ES';
+      case 'fr':
+        return 'FR';
+      case 'pt':
+        return 'PT';
+      default:
+        return 'EN';
+    }
+  };
+
+  const dropdownLabel = getShortNames(currentLocale);
 
   return (
     <React.Fragment>
@@ -43,8 +84,8 @@ export default function CustomMobileSidebar() {
             onError={(error) =>
               new Error(
                 `A theme navbar item failed to render.
-            Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
-            ${JSON.stringify(item, null, 2)}`,
+                Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+                ${JSON.stringify(item, null, 2)}`,
               )
             }
           >
@@ -58,15 +99,22 @@ export default function CustomMobileSidebar() {
         ))}
       </div>
       <div className='navbar__item navbar__link' onClick={toggleLanguageSidebar}>
-        <LabelPairedGlobeCaptionRegularIcon /> EN
+        <LabelPairedGlobeCaptionRegularIcon /> {dropdownLabel}
       </div>
 
       <div className={`language_sidebar ${languageSidebarVisible ? 'visible' : ''}`}>
         <StandaloneChevronLeftRegularIcon iconSize='md' onClick={toggleLanguageSidebar} />
 
         <div className='language_sidebar__items'>
-          {locales.map((locale) => (
-            <div key={locale}>{locale}</div>
+          {localeItems.map((localeItem) => (
+            <a
+              key={localeItem.lang}
+              href={localeItem.to}
+              className={localeItem.className}
+              onClick={() => mobileSidebar.toggle()}
+            >
+              {localeItem.label}
+            </a>
           ))}
         </div>
       </div>

src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss

@@ -5,6 +5,7 @@
       padding: 16px 16px;
       font-size: 0.875rem;
       align-items: flex-start;
+      background-color: var(--ifm-navbar-background-color);
       gap: 8px;
       align-self: stretch;
       font-weight: var(--ifm-font-weight-normal);
@@ -13,12 +14,6 @@
       width: 100vw;
     }
 
-    .navbar__link {
-      &--active {
-        background-color: var(--ifm-menu-color-background-active);
-      }
-    }
-
     .language_sidebar {
       position: fixed;
       top: 0;
@@ -37,24 +32,31 @@
         opacity: 1;
         visibility: visible;
         transform: translateX(0);
-        margin-left: 10px;
       }
 
       &__items {
         margin-top: 16px;
         display: flex;
-        height: 48px;
-        min-height: 48px;
-        max-height: 48px;
         padding: 0px 16px;
-        margin-left: 32px;
-        padding-right: 32px;
-        gap: 32px;
-        align-self: stretch;
-        height: calc(100% - var(--ifm-navbar-height));
-        transform: translateZ(0);
-        transition: transform var(--ifm-transition-fast) ease-in-out;
         flex-direction: column;
+        gap: 24px;
+        align-items: flex-start;
+      }
+
+      a {
+        overflow: hidden;
+        font-family: var(--ibm-font-family-base);
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: rgba(0, 0, 0, 0.72) !important;
+        text-decoration: none;
+
+        &:hover,
+        &:active,
+        &.dropdown__link--active {
+          color: var(--colors-coral500) !important;
+        }
       }
     }
   }

src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -20,11 +20,11 @@ export default function LocaleDropdownNavbarItem({
   const { search, hash } = useLocation();
 
   const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
-    const baseTo = `pathname://${alternatePageUtils.createUrl({
+    const baseTo = `pathname:${alternatePageUtils.createUrl({
       locale,
       fullyQualified: false,
     })}`;
-    // preserve ?search#hash suffix on locale switches
+
     const to = `${baseTo}${search}${hash}`;
     return {
       label: localeConfigs[locale].label,