langswitcher

docusaurus.config.js

@@ -123,6 +123,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {

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,69 @@
+import React 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 { Button } from '@deriv/ui';
+
+export function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items;
+}
+
+export default function CustomMobileSidebar() {
+  const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false);
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems] = splitNavbarItems(items);
+
+  React.useEffect(() => {
+    if (!mobileSidebar?.shown) {
+      setLanguageSidebarVisible(false);
+    }
+  }, [mobileSidebar]);
+
+  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}>
+        <img src='/static/language-switcher.svg' alt='Language Switcher' />
+      </div>
+
+      {/* Conditionally render the language sidebar */}
+      <div className={`language_sidebar ${languageSidebarVisible ? 'visible' : ''}`}>
+        <Button onClick={toggleLanguageSidebar} className='language_sidebar__buttons'>
+          <img src='static/img/chevron-left'></img>
+        </Button>
+        <div className='language_sidebar__items'>
+          <div>En</div>
+          <div>Fr</div>
+          <div>Th</div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}

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

@@ -0,0 +1,57 @@
+@media (max-width: 996px) {
+  .navbar-sidebar__item {
+    .navbar__item {
+      display: block;
+      padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+      font-size: 0.875rem;
+      font-weight: var(--ifm-font-weight-normal);
+      line-height: 1.25rem;
+      height: 40px;
+      width: 100vw;
+    }
+
+    .navbar__link {
+      &--active {
+        background-color: var(--ifm-menu-color-background-active);
+      }
+    }
+
+    /* Style for the language sidebar */
+    .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);
+      }
+
+      &__buttons {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--ifm-navbar-border-color);
+      }
+
+      &__items {
+        margin: 18px;
+        display: flex;
+        height: calc(100% - var(--ifm-navbar-height));
+        transform: translateZ(0);
+        transition: transform var(--ifm-transition-fast) ease-in-out;
+        flex-direction: column;
+      }
+    }
+  }
+}

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,85 @@
+.language_switcher {
+  .dropdown {
+    position: relative;
+  }
+  .dropdown > .navbar__link:after {
+    display: none;
+  }
+
+  .dropdown__menu {
+    position: fixed;
+    display: flex;
+    top: 80px;
+    left: 0px;
+    padding-right: 100px;
+    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;
+    }
+    @media (max-width: 996px) {
+      display: none;
+    }
+  }
+
+  .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);
+  }
+}