From 9645617111cff6ff9cc586b62e4145899436bb8f Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 9 May 2024 08:16:18 +0400 Subject: [PATCH 1/6] Language Switcher Design --- docusaurus.config.js | 11 ++- src/styles/index.scss | 9 +-- .../LocaleDropdownNavbarItem/index.tsx | 60 ++++++++++++++ .../locale-dropdown-navbar-item.scss | 80 +++++++++++++++++++ static/img/language-switcher.svg | 10 +++ 5 files changed, 162 insertions(+), 8 deletions(-) create mode 100644 src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx create mode 100644 src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss create mode 100644 static/img/language-switcher.svg 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..e6ab1919d --- /dev/null +++ b/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); + } +} 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 @@ + + + + + + + + + + From 097dc1a68ead9f3dc811fca0f5fae4467c26699f Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Sun, 12 May 2024 12:43:09 +0400 Subject: [PATCH 2/6] styling language switcher --- .../locale-dropdown-navbar-item.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index e6ab1919d..4ce85fc47 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -1,5 +1,4 @@ .language_switcher { - position: relative; .dropdown { position: relative; } @@ -8,8 +7,11 @@ } .dropdown__menu { - position: absolute; + position: fixed; display: flex; + top: 80px; + left: 0px; + padding-right: 100px; width: 100vw; min-width: 1280px; padding-bottom: 32px; From f822c5d2afd5aad1337917314eb7cd7b10fb1e7e Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Tue, 14 May 2024 11:52:55 +0800 Subject: [PATCH 3/6] chore: add custom mobile sidebar --- .../MobileSidebar/PrimaryMenu/index.tsx | 43 +++++++++++++++++++ .../PrimaryMenu/primary-menu.scss | 17 ++++++++ 2 files changed, 60 insertions(+) create mode 100644 src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx create mode 100644 src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx new file mode 100644 index 000000000..f8a77ae4c --- /dev/null +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -0,0 +1,43 @@ +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'; + +export function useNavbarItems() { + // TODO temporary casting until ThemeConfig type is improved + return useThemeConfig().navbar.items; +} + +export default function CustomMobileSidebar() { + const mobileSidebar = useNavbarMobileSidebar(); + const items = useNavbarItems(); + const [leftItems] = splitNavbarItems(items); + console.log('test mobileSidebar', mobileSidebar); + console.log('test items', items); + + 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
+ + ); +} 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..6f5de4928 --- /dev/null +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -0,0 +1,17 @@ +@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); + } + } + } +} From 0e7947a83f24677a622dc4c7e41a2d6cd8bf3779 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Tue, 14 May 2024 12:00:06 +0800 Subject: [PATCH 4/6] chore: remove consoles --- src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index f8a77ae4c..dd472a969 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -13,8 +13,6 @@ export default function CustomMobileSidebar() { const mobileSidebar = useNavbarMobileSidebar(); const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); - console.log('test mobileSidebar', mobileSidebar); - console.log('test items', items); return ( From 4a741fec149fad9ef3c37b25bb9f0844c0888583 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Tue, 14 May 2024 12:50:22 +0800 Subject: [PATCH 5/6] chore: add functionality --- .../MobileSidebar/PrimaryMenu/index.tsx | 62 +++++++++++++------ .../PrimaryMenu/primary-menu.scss | 38 ++++++++++++ 2 files changed, 80 insertions(+), 20 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index dd472a969..4bae18831 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -3,6 +3,7 @@ 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 @@ -10,32 +11,53 @@ export function useNavbarItems() { } export default function CustomMobileSidebar() { + const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); const mobileSidebar = useNavbarMobileSidebar(); const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); + 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
+
+ {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 index 6f5de4928..0d6e4f981 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -13,5 +13,43 @@ 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; + } + } } } From f4241564b5a23b7062d2ad6a4602fcf06810f7fb Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Tue, 14 May 2024 12:56:31 +0800 Subject: [PATCH 6/6] chore: hide language sidebar on main sidebar close --- src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index 4bae18831..553e6af47 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -16,6 +16,12 @@ export default function CustomMobileSidebar() { const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); + React.useEffect(() => { + if (!mobileSidebar?.shown) { + setLanguageSidebarVisible(false); + } + }, [mobileSidebar]); + const toggleLanguageSidebar = () => { setLanguageSidebarVisible(!languageSidebarVisible); };