style: modified design

Author: utkarsha-deriv

src/styles/index.scss

@@ -273,8 +273,7 @@ main[class*='docMainContainer'] .container {
 
 .dropdown__menu {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: rem(1.6);
+  gap: rem(0.8);
   padding: rem(1.6) rem(1.6);
   background-color: var(--colors-greyLight100);
   border-radius: rem(0.8);
@@ -291,6 +290,12 @@ main[class*='docMainContainer'] .container {
   }
 }
 
+.navbar__items--right a {
+  @media (max-width: 1201px) {
+    font-size: rem(1.4);
+  }
+}
+
 .dropdown {
   height: 100%;
   padding-top: rem(2.5);
@@ -314,6 +319,8 @@ main[class*='docMainContainer'] .container {
   color: var(--colors-coral500);
 }
 
+// removes language switcher from sidebar
+// docusaurus puts all navbaritems into sidebar in responsive design by default
 .menu__list-item:last-child {
   display: none;
 }

src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
-import { translate } from '@docusaurus/Translate';
 import { useLocation } from '@docusaurus/router';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
@@ -34,27 +33,13 @@ export default function LocaleDropdownNavbarItem({
       autoAddBaseUrl: false,
       className:
         // eslint-disable-next-line no-nested-ternary
-        locale === currentLocale
-          ? // Similar idea as DefaultNavbarItem: select the right Infima active
-            // class name. This cannot be substituted with isActive, because the
-            // target URLs contain `pathname://` and therefore are not NavLinks!
-            // mobile
-            // ? 'menu__link--active' :
-            'dropdown__link--active'
-          : '',
+        locale === currentLocale ? 'dropdown__link--active' : '',
     };
   });
 
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
 
-  // Mobile is handled a bit differently
-  const dropdownLabel =
-    // mobile  ? translate({
-    //       message: 'Languages',
-    //       id: 'theme.navbar.mobileLanguageDropdown.label',
-    //       description: 'The label for the mobile language switcher dropdown',
-    //     }) :
-    localeConfigs[currentLocale].label;
+  const dropdownLabel = localeConfigs[currentLocale].label;
 
   return (
     <DropdownNavbarItem