mobile sidebar

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@deriv/deriv-api": "^1.0.11",
+    "@deriv/quill-icons": "^1.22.7",
     "@deriv/ui": "^0.1.0",
     "@docusaurus/core": "^2.4.0",
     "@docusaurus/plugin-client-redirects": "^2.4.0",

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

@@ -4,6 +4,10 @@ import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-comm
 import NavbarItem from '@theme/NavbarItem';
 import './primary-menu.scss';
 import { Button } from '@deriv/ui';
+import {
+  LabelPairedGlobeCaptionRegularIcon,
+  StandaloneChevronLeftRegularIcon,
+} from '@deriv/quill-icons';
 
 export function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -50,18 +54,19 @@ export default function CustomMobileSidebar() {
         ))}
       </div>
       <div className='navbar__item navbar__link' onClick={toggleLanguageSidebar}>
-        <img src='/static/language-switcher.svg' alt='Language Switcher' />
+        <LabelPairedGlobeCaptionRegularIcon /> EN
       </div>
 
       {/* Conditionally render the language sidebar */}
       <div className={`language_sidebar ${languageSidebarVisible ? 'visible' : ''}`}>
         <Button onClick={toggleLanguageSidebar} className='language_sidebar__buttons'>
-          <img src='static/img/chevron-left'></img>
+          <StandaloneChevronLeftRegularIcon iconSize='md' />
         </Button>
         <div className='language_sidebar__items'>
-          <div>En</div>
-          <div>Fr</div>
-          <div>Th</div>
+          <div>English</div>
+          <div>Español</div>
+          <div>Français</div>
+          <div>Português</div>
         </div>
       </div>
     </React.Fragment>

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

@@ -1,9 +1,12 @@
 @media (max-width: 996px) {
   .navbar-sidebar__item {
     .navbar__item {
-      display: block;
-      padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+      display: flex;
+      padding: 16px 16px;
       font-size: 0.875rem;
+      align-items: flex-start;
+      gap: 8px;
+      align-self: stretch;
       font-weight: var(--ifm-font-weight-normal);
       line-height: 1.25rem;
       height: 40px;
@@ -39,14 +42,24 @@
 
       &__buttons {
         display: flex;
-        justify-content: space-between;
+        width: 32px;
+        height: 32px;
+        padding: 0px 16px;
+        justify-content: center;
         align-items: center;
-        border-bottom: 1px solid var(--ifm-navbar-border-color);
       }
 
       &__items {
-        margin: 18px;
+        margin-top: 16px;
         display: flex;
+        height: 48px;
+        min-height: 48px;
+        max-height: 48px;
+        padding: 0px 16px;
+        padding-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;