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/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx new file mode 100644 index 000000000..553e6af47 --- /dev/null +++ b/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 ( + +
+ {leftItems.map((item, i) => ( + + 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)}`, + ) + } + > + { + mobileSidebar.toggle(); + }} + /> + + ))} +
+
+ Language Switcher Placeholder +
+ + {/* Conditionally render the language sidebar */} +
+ +
+
En
+
Fr
+
Th
+
+
+ + ); +} diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss new file mode 100644 index 000000000..0d6e4f981 --- /dev/null +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -0,0 +1,55 @@ +@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; + } + + .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; + } + } + } +} 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 @@ + + + + + + + + + +