Utkarsha/language switcher component

docusaurus.config.js

@@ -24,7 +24,15 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'es'],
+    localeConfigs: {
+      en: {
+        label: 'English',
+      },
+      es: {
+        label: 'Español',
+      },
+    },
   },
 
   plugins: [
@@ -96,6 +104,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {

src/features/Home/GetStarted/__tests__/GetStarted.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { cleanup, render, screen } from '@site/src/test-utils';
 import { GetStarted } from '../GetStarted';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { act, renderHook } from '@testing-library/react-hooks';
 
 describe('GetStarted', () => {
   beforeEach(() => {
@@ -13,19 +15,27 @@ describe('GetStarted', () => {
     const get_started = screen.getByTestId('started-header');
     expect(get_started).toBeInTheDocument();
   });
-  it('should render title properly', () => {
-    const started_header = screen.getByRole('heading', { level: 2, name: /Get started with/ });
-    expect(started_header).toHaveTextContent('Get started with our API in 3 simple steps:');
-  });
-  it('should navigate to the correct links on click', () => {
+
+  it('should navigate to the correct links on click when language is portuguese', () => {
+    const { result } = renderHook(() => useDocusaurusContext());
+
+    let local: string;
+    act(() => {
+      local = result.current.i18n.currentLocale;
+    });
+    const lang = local === 'en' ? '' : `/${local}`;
+
     expect(screen.getByTestId('signUp').closest('a')).toHaveAttribute(
       'href',
       'https://deriv.com/signup/',
     );
-    expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard');
+    expect(screen.getByTestId('register').closest('a')).toHaveAttribute(
+      'href',
+      `${lang}/dashboard`,
+    );
     expect(screen.getByTestId('guide').closest('a')).toHaveAttribute(
       'href',
-      '/docs/category/guides',
+      `${lang}/docs/category/guides`,
     );
   });
 });

src/styles/index.scss

@@ -266,3 +266,61 @@ main[class*='docMainContainer'] .container {
     width: rem(1.2);
   }
 }
+
+.dropdown > .navbar__link:after {
+  display: none;
+}
+
+.dropdown__menu {
+  display: grid;
+  gap: rem(0.8);
+  padding: rem(1.6) rem(1.6);
+  background-color: var(--colors-greyLight100);
+  border-radius: rem(0.8);
+  box-shadow: 0 0 rem(2) rgba(0, 0, 0, 0.05), 0 rem(1.6) rem(1.6) rgba(0, 0, 0, 0.05);
+  visibility: visible;
+}
+
+.navbar__items--right .dropdown__link {
+  font-weight: normal;
+  font-size: rem(1.6);
+  line-height: rem(2.4);
+  @media (max-width: 1201px) {
+    font-size: rem(1.4);
+  }
+}
+
+.navbar__items--right a {
+  @media (max-width: 1201px) {
+    font-size: rem(1.4);
+  }
+}
+
+.dropdown {
+  height: 100%;
+  padding-top: rem(2.5);
+  @media screen {
+    display: grid;
+  }
+}
+
+.dropdown:hover {
+  .navbar__link {
+    color: var(--colors-coral500);
+  }
+}
+
+.dropdown__link--active {
+  color: var(--colors-coral500);
+  background-color: var(--colors-greyLight100);
+}
+
+.dropdown__link--active:hover {
+  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

@@ -0,0 +1,49 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
+import { useLocation } from '@docusaurus/router';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
+import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import classnames from 'classnames';
+
+export default function LocaleDropdownNavbarItem({
+  dropdownItemsBefore,
+  dropdownItemsAfter,
+  ...props
+}: Props): JSX.Element {
+  const {
+    i18n: { currentLocale, locales, localeConfigs },
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const { search, hash } = useLocation();
+
+  const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
+    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,
+      lang: localeConfigs[locale].htmlLang,
+      to,
+      target: '_self',
+      autoAddBaseUrl: false,
+      className: classnames({ 'dropdown__link--active': locale === currentLocale }),
+    };
+  });
+
+  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
+
+  const dropdownLabel = localeConfigs[currentLocale].label;
+
+  return (
+    <DropdownNavbarItem
+      {...props}
+      label={<>{dropdownLabel === 'English' ? 'EN' : 'ES'}</>}
+      items={items}
+    />
+  );
+}