fix styling mobile

deriv-com · May 15, 2024 · f0dba40 · f0dba40
1 parent 5b7e1c9
commit f0dba40
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -9,8 +9,9 @@ import {
   StandaloneChevronLeftRegularIcon,
 } from '@deriv/quill-icons';
 
+import config from '@generated/docusaurus.config'; // Adjust the path as needed
+
 export function useNavbarItems() {
-  // TODO temporary casting until ThemeConfig type is improved
   return useThemeConfig().navbar.items;
 }
 
@@ -30,6 +31,9 @@ export default function CustomMobileSidebar() {
     setLanguageSidebarVisible(!languageSidebarVisible);
   };
 
+  // Get the available locales from Docusaurus config
+  const { locales } = config.i18n;
+
   return (
     <React.Fragment>
       <div>
@@ -57,16 +61,13 @@ export default function CustomMobileSidebar() {
         <LabelPairedGlobeCaptionRegularIcon /> EN
       </div>
 
-      {/* Conditionally render the language sidebar */}
       <div className={`language_sidebar ${languageSidebarVisible ? 'visible' : ''}`}>
-        <Button onClick={toggleLanguageSidebar} className='language_sidebar__buttons'>
-          <StandaloneChevronLeftRegularIcon iconSize='md' />
-        </Button>
+        <StandaloneChevronLeftRegularIcon iconSize='md' onClick={toggleLanguageSidebar} />
+
         <div className='language_sidebar__items'>
-          <div>English</div>
-          <div>Español</div>
-          <div>Français</div>
-          <div>Português</div>
+          {locales.map((locale) => (
+            <div key={locale}>{locale}</div>
+          ))}
         </div>
       </div>
     </React.Fragment>

diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss
@@ -19,7 +19,6 @@
       }
     }
 
-    /* Style for the language sidebar */
     .language_sidebar {
       position: fixed;
       top: 0;
@@ -40,13 +39,8 @@
         transform: translateX(0);
       }
 
-      &__buttons {
-        display: flex;
-        width: 32px;
-        height: 32px;
-        padding: 0px 16px;
-        justify-content: center;
-        align-items: center;
+      &.side {
+        margin-left: 25.5px;
       }
 
       &__items {
@@ -56,7 +50,7 @@
         min-height: 48px;
         max-height: 48px;
         padding: 0px 16px;
-        padding-left: 32px;
+        margin-left: 32px;
         padding-right: 32px;
         gap: 32px;
         align-self: stretch;

diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss
@@ -50,7 +50,6 @@
     align-items: center;
     gap: 4px;
     justify-content: flex-end;
-    padding-top: rem(2.5);
     @media (max-width: 996px) {
       display: none;
     }