diff --git a/docusaurus.config.js b/docusaurus.config.js
index 763a13a78..2af551e8a 100644
--- a/docusaurus.config.js
+++ b/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: {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 535b94543..b9982fee2 100644
--- a/src/styles/index.scss
+++ b/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 {
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
new file mode 100644
index 000000000..0fc8c85fb
--- /dev/null
+++ b/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 (
+
+ {dropdownLabel}} items={items} />
+
+ );
+}
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss
new file mode 100644
index 000000000..4ce85fc47
--- /dev/null
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss
@@ -0,0 +1,82 @@
+.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;
+ }
+ }
+
+ .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);
+ }
+}
diff --git a/static/img/language-switcher.svg b/static/img/language-switcher.svg
new file mode 100644
index 000000000..4bedbccc0
--- /dev/null
+++ b/static/img/language-switcher.svg
@@ -0,0 +1,10 @@
+