chore: language switcher spike

docusaurus.config.js

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

src/styles/index.scss

@@ -444,3 +444,62 @@ main[class*='docMainContainer'] .container {
     width: rem(1.2);
   }
 }
+
+.dropdown > .navbar__link:after {
+  display: none;
+}
+
+.dropdown__menu {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: rem(1.6);
+  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,65 @@
+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 getShortNames = (locale) => {
+    switch (locale) {
+      case 'en':
+        return 'EN';
+      case 'es':
+        return 'ES';
+      case 'zh-Hans':
+        return '简体';
+      case 'zh-Hant':
+        return '繁體';
+      case 'fr':
+        return 'FR';
+      case 'de':
+        return 'DE';
+      case 'vi':
+        return 'VI';
+      case 'th':
+        return 'TH';
+      default:
+        return 'EN';
+    }
+  };
+
+  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
+  const dropdownLabel = getShortNames(currentLocale);
+
+  return <DropdownNavbarItem {...props} label={<>{dropdownLabel}</>} items={items} />;
+}