Language Switcher Design

docusaurus.config.js

@@ -27,7 +27,12 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'es', 'fr'],
+    localeConfigs: {
+      en: {
+        label: 'English',
+      },
+    },
   },
 
   plugins: [
@@ -118,6 +123,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {

src/styles/index.scss

@@ -1,6 +1,5 @@
 @use 'src/styles/utility' as *;
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap');
-@import '@deriv/quill-design/dist/quill-design.css';
 
 /**
  * Any CSS included here will be global. The classic template
@@ -41,10 +40,6 @@
   --smoke: #414652;
   --admin-text: #22bd41;
   --admin-border: #33c9517a;
-  --solid-slate-50: #ffffff;
-  --solid-slate-75: #f6f7f8;
-  --opacity-black-100: #00000014;
-  --opacity-black-75: #0000000a;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -84,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,
@@ -242,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/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -0,0 +1,60 @@
+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';
+import './locale-dropdown-navbar-item.scss';
+
+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 getShortNames = (locale) => {
+    switch (locale) {
+      case 'en':
+        return 'EN';
+      case 'es':
+        return 'ES';
+      case 'fr':
+        return 'FR';
+      default:
+        return 'EN';
+    }
+  };
+
+  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
+  const dropdownLabel = getShortNames(currentLocale);
+
+  return (
+    <div className='language_switcher'>
+      <DropdownNavbarItem {...props} label={<>{dropdownLabel}</>} items={items} />
+    </div>
+  );
+}

src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss

@@ -0,0 +1,80 @@
+.language_switcher {
+  position: relative;
+  .dropdown {
+    position: relative;
+  }
+  .dropdown > .navbar__link:after {
+    display: none;
+  }
+
+  .dropdown__menu {
+    position: absolute;
+    display: flex;
+    width: 100vw;
+    min-width: 1280px;
+    padding-bottom: 32px;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+    background-color: var(--ifm-navbar-background-color);
+    box-shadow: var(--ifm-navbar-shadow);
+    overscroll-behavior-y: contain;
+    overflow-y: auto;
+    align-items: flex-end;
+    z-index: 999;
+  }
+
+  .navbar__items--right .dropdown__link {
+    font-weight: normal;
+    font-style: normal;
+    line-height: 24px;
+    font-size: 18px;
+    @media (max-width: 1201px) {
+      font-size: rem(1.4);
+    }
+  }
+
+  .navbar__items--right a {
+    @media (max-width: 1201px) {
+      font-size: rem(1.4);
+    }
+  }
+
+  .dropdown {
+    background-image: url('/img/language-switcher.svg');
+    background-repeat: no-repeat;
+    display: flex;
+    padding: 2px 22px;
+    align-items: center;
+    gap: 4px;
+    justify-content: flex-end;
+    padding-top: rem(2.5);
+    @media screen {
+      display: grid;
+    }
+  }
+
+  .navbar__link {
+    font-weight: normal;
+  }
+  .dropdown__link {
+    font-size: 16px;
+    font-weight: normal;
+    margin-top: 15px;
+  }
+
+  .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);
+  }
+}