Agrim/dapi547/langswitcher

docusaurus.config.js

@@ -16,7 +16,7 @@ const config = {
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'binary-com', // Usually your GitHub org/user name.
   projectName: 'deriv-api-docs', // Usually your repo name.
-  trailingSlash: false,
+  // trailingSlash: true,
 
   customFields: {
     trackJsToken: process.env.TRACKJS_TOKEN,
@@ -27,7 +27,7 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en', 'es', 'fr'],
+    locales: ['en', 'es', 'fr', 'pt'],
     localeConfigs: {
       en: {
         label: 'English',
@@ -123,6 +123,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {

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/features/Home/GetStarted/__tests__/GetStarted.test.tsx

@@ -22,10 +22,10 @@ describe('GetStarted', () => {
       'href',
       'https://deriv.com/signup/',
     );
-    expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard');
+    expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard/');
     expect(screen.getByTestId('guide').closest('a')).toHaveAttribute(
       'href',
-      '/docs/category/guides',
+      '/docs/category/guides/',
     );
   });
 });

src/styles/index.scss

@@ -79,7 +79,7 @@ button {
 ul li a,
 nav a,
 nav a div {
-  font-family: var(--ubuntu-font-family);
+  font-family: var(--ibm-font-family-base);
 }
 
 h1,
@@ -237,7 +237,7 @@ div[class*='sidebarViewport'] {
     .search-overlay {
       display: none;
     }
-    &.search-closed + div[class*='searchBox'] {
+    &.search-closed ~ div[class*='searchBox'] {
       display: none;
     }
     &.search-open {

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

@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from 'react';
+import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common';
+import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
+import NavbarItem from '@theme/NavbarItem';
+import './primary-menu.scss';
+import {
+  LabelPairedGlobeCaptionRegularIcon,
+  StandaloneChevronLeftRegularIcon,
+} from '@deriv/quill-icons';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useLocation } from '@docusaurus/router';
+import classnames from 'classnames';
+
+export function useNavbarItems() {
+  return useThemeConfig().navbar.items;
+}
+
+const replaceLocale = (path, newLocale, locales, trailingSlash) => {
+  let newPath = path;
+  let currentLocale = 'en';
+  for (const locale of locales) {
+    if (path.startsWith(`/${locale}/`) || path === `/${locale}`) {
+      currentLocale = locale;
+      newPath = path.replace(`/${locale}`, '');
+      break;
+    }
+  }
+  if (newLocale && newLocale !== 'en') {
+    newPath = `/${newLocale}${newPath}`;
+  }
+  if (trailingSlash && !newPath.endsWith('/')) {
+    newPath += '/';
+  }
+  return {
+    newPath,
+    currentLocale,
+  };
+};
+
+const changeLocale = (newLocale, locales, trailingSlash) => {
+  const { pathname } = window.location;
+  const { newPath } = replaceLocale(pathname, newLocale, locales, trailingSlash);
+  window.location.replace(`${newPath}`);
+};
+
+export default function CustomMobileSidebar() {
+  const [languageSidebarVisible, setLanguageSidebarVisible] = useState(false);
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems] = splitNavbarItems(items);
+  const { pathname } = useLocation();
+  const {
+    i18n: { locales, localeConfigs },
+    siteConfig: { trailingSlash },
+  } = useDocusaurusContext();
+  const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash);
+  const [selectedLocale, setSelectedLocale] = useState(currentLocale);
+
+  useEffect(() => {
+    const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash);
+    setSelectedLocale(currentLocale);
+  }, [pathname, locales, trailingSlash]);
+
+  const localeItems = locales.map((locale) => {
+    const { newPath } = replaceLocale(pathname, locale, locales, trailingSlash);
+    return {
+      label: localeConfigs[locale].label,
+      lang: locale,
+      className: classnames({ 'dropdown__link--active': locale === selectedLocale }),
+      onClick: (e) => {
+        e.preventDefault();
+        changeLocale(locale, locales, trailingSlash);
+      },
+    };
+  });
+
+  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(selectedLocale);
+
+  const toggleLanguageSidebar = () => {
+    setLanguageSidebarVisible(!languageSidebarVisible);
+  };
+
+  return (
+    <React.Fragment>
+      <div>
+        {leftItems.map((item, i) => (
+          <ErrorCauseBoundary
+            key={i}
+            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)}`,
+              )
+            }
+          >
+            <NavbarItem
+              {...item}
+              onClick={() => {
+                mobileSidebar.toggle();
+              }}
+            />
+          </ErrorCauseBoundary>
+        ))}
+      </div>
+      <div className='navbar__item navbar__link' onClick={toggleLanguageSidebar}>
+        <LabelPairedGlobeCaptionRegularIcon /> {dropdownLabel}
+      </div>
+
+      <div className={`language_sidebar ${languageSidebarVisible ? 'visible' : ''}`}>
+        <StandaloneChevronLeftRegularIcon iconSize='md' onClick={toggleLanguageSidebar} />
+
+        <div className='language_sidebar__items'>
+          {localeItems.map((localeItem) => (
+            <a
+              key={localeItem.lang}
+              href='#'
+              className={localeItem.className}
+              onClick={(e) => {
+                e.preventDefault();
+                localeItem.onClick(e);
+                mobileSidebar.toggle();
+              }}
+            >
+              {localeItem.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}

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

@@ -0,0 +1,70 @@
+@media (max-width: 996px) {
+  .navbar-sidebar__item {
+    .navbar__item {
+      display: flex;
+      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);
+      line-height: 1.25rem;
+      height: 40px;
+      width: 100vw;
+      cursor: pointer;
+    }
+
+    .navbar__item.navbar__link {
+      color: var(--core-color-solid-slate-1400, #000);
+    }
+
+    .language_sidebar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      background-color: var(--ifm-navbar-background-color);
+      width: var(--ifm-navbar-sidebar-width);
+      height: 100%;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateX(-100%);
+      transition-property: opacity, visibility, transform;
+      transition-duration: var(--ifm-transition-fast);
+      transition-timing-function: ease-in-out;
+
+      &.visible {
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(0);
+      }
+
+      &__items {
+        margin-top: 16px;
+        display: flex;
+        padding: 0px 16px;
+        flex-direction: column;
+        gap: 24px;
+        align-items: flex-start;
+        cursor: pointer;
+      }
+
+      a {
+        overflow: hidden;
+        font-family: var(--ibm-font-family-base);
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important;
+        text-decoration: none;
+        background-color: var(--ifm-navbar-background-color);
+
+        &:hover,
+        &:active,
+        &.dropdown__link--active {
+          color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important;
+        }
+      }
+    }
+  }
+}