From 57d25ec31ea312b2603e752fe869eb4ee3e62116 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 1 Jun 2023 21:50:06 +0900 Subject: [PATCH 1/6] update footer__title font weight --- .../docusaurus.config.js | 62 ++++++++++++++++++- .../src/client/css/custom.scss | 1 + 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 6b94846..5b052d1 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -36,7 +36,7 @@ const config = { }, }, docs: { - routeBasePath: '/docs', + routeBasePath: '/about', versions: { current: { label: 'current', @@ -56,6 +56,66 @@ const config = { defaultMode: 'dark', disableSwitch: false, }, + navbar: { + items: [ + { + type: 'search', + }, + { + label: 'About', + to: '/about', + }, + { + label: 'Github', + href: 'https://github.com/status-im', + }, + ], + }, + footer: { + copyright: 'Nimbus @2023
All Rights Reserved.', + links: [ + { + items: [ + { + href: 'https://twitter.com/ethnimbus', + label: 'Twitter', + }, + { + href: 'https://discord.gg/EP8DZnXu9y', + label: 'Discord', + }, + { + href: '/', + label: 'Docs', + }, + { + href: '/', + label: 'Github', + }, + ], + }, + { + items: [ + { + href: '/', + label: 'Contact us', + }, + { + href: 'https://jobs.status.im/', + label: 'Work with us', + }, + { + href: '/', + label: 'Privacy policy', + }, + { + href: '/', + label: 'Temrs & conditions', + }, + ], + }, + ], + }, }), } diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 9c95ab4..e94591d 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -713,6 +713,7 @@ small { .footer__title { @include lsd.typography('label1'); margin-bottom: 4px; + font-weight: var(--ifm-font-weight-normal); } .footer > div:nth-child(1) > .footer__links { From 4ca9b48a132d92a5106fc2fe70646af223727925 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 1 Jun 2023 22:13:42 +0900 Subject: [PATCH 2/6] hide sidebar when scrolling down --- packages/docusaurus-playground/docusaurus.config.js | 1 + .../logos-docusaurus-theme/src/client/css/custom.scss | 8 ++++++++ .../src/client/theme/DocSidebar/Desktop/styles.module.css | 2 +- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 5b052d1..824e7a5 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -70,6 +70,7 @@ const config = { href: 'https://github.com/status-im', }, ], + hideOnScroll: true, }, footer: { copyright: 'Nimbus @2023
All Rights Reserved.', diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index e94591d..6986362 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -540,6 +540,14 @@ small { align-items: center; } +a[class^='sidebarLogo_'] { + margin: 0; + + img { + height: 48px; + } +} + @include utils.responsive('sm', 'down') { :root { --ifm-global-spacing: 0.5rem; diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css index 8863ded..a8fc5ff 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css @@ -3,7 +3,7 @@ display: flex; flex-direction: column; height: 100%; - margin-top: var(--ifm-navbar-height); + padding-top: var(--ifm-navbar-height); /* width: var(--doc-sidebar-width); */ } From 670d4e74c0d5a6d877cced34302559810a12f0a6 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 1 Jun 2023 23:20:41 +0900 Subject: [PATCH 3/6] update mobile sidebar --- .../src/client/css/custom.scss | 54 ++++++++++++++++++- .../theme/DocSidebarItem/Category/index.tsx | 6 ++- .../Navbar/MobileSidebar/Header/index.tsx | 35 ++++++++++++ .../MobileSidebar/SecondaryMenu/index.tsx | 37 +++++++++++++ 4 files changed, 129 insertions(+), 3 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 6986362..d3edbd2 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -185,7 +185,7 @@ --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5); --ifm-navbar-shadow: var(--ifm-global-shadow-lw); --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,'); - --ifm-navbar-sidebar-width: 83vw; + --ifm-navbar-sidebar-width: 100vw; --ifm-pagination-border-radius: var(--ifm-global-radius); --ifm-pagination-font-size: 1rem; --ifm-pagination-item-active-background: var(--ifm-hover-overlay); @@ -548,6 +548,27 @@ a[class^='sidebarLogo_'] { } } +.navbar-sidebar__item { + padding-inline: var(--content-padding); + padding-block: 0; +} + +.navbar-sidebar__back { + display: flex; + align-items: center; + padding: 0; + width: 100% !important; + margin: 0 !important; + gap: 16px; + margin-top: 24px !important; + margin-bottom: 24px !important; +} + +.theme-doc-sidebar-menu .menu__link { + padding-left: var(--content-padding); + padding-right: 0; +} + @include utils.responsive('sm', 'down') { :root { --ifm-global-spacing: 0.5rem; @@ -879,4 +900,35 @@ a[class^='sidebarLogo_'] { .main-wrapper { padding-inline: 0; } + + .navbar-sidebar__brand { + height: 60px; + padding-block: 0; + } + + .navbar-sidebar__brand > button { + width: 32px; + height: 32px; + } + + .navbar-sidebar__brand > button:first-of-type { + margin-right: 0 !important; + margin-left: auto; + } + + .navbar-sidebar__brand > button:not(:last-of-type) { + border-right: none; + } + + .navbar-sidebar__close { + border: 1px solid rgb(var(--lsd-border-primary)); + display: flex; + align-items: center; + justify-content: center; + margin-left: unset; + } + + .menu__list-item .menu__link { + font-size: var(--lsd-body2-fontSize); + } } diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx index bba0b2d..e281f94 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx @@ -17,7 +17,7 @@ import Link from '@docusaurus/Link' import { translate } from '@docusaurus/Translate' import useIsBrowser from '@docusaurus/useIsBrowser' import DocSidebarItems from '@theme/DocSidebarItems' -import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react' +import { ArrowDownIcon, ArrowUpIcon, Typography } from '@acid-info/lsd-react' // If we navigate to a category and it becomes active, it should automatically // expand itself @@ -165,7 +165,9 @@ export default function DocSidebarItemCategory({ href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback} {...props} > - {label} + + {label} + {collapsed ? : } {href && collapsible && ( diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx new file mode 100644 index 0000000..f9b4166 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal' +import { translate } from '@docusaurus/Translate' +import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle' +import NavbarLogo from '@theme/Navbar/Logo' +import { CloseIcon } from '@acid-info/lsd-react' +import SearchBar from '@theme/SearchBar' + +function CloseButton() { + const mobileSidebar = useNavbarMobileSidebar() + return ( + + ) +} +export default function NavbarMobileSidebarHeader() { + return ( +
+ + + + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx new file mode 100644 index 0000000..69ba0e3 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { useThemeConfig } from '@docusaurus/theme-common' +import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal' +import Translate from '@docusaurus/Translate' +import { Typography } from '@acid-info/lsd-react' +import { IconArrowLeft } from '@logos-theme/components/Icon' + +function SecondaryMenuBackButton(props) { + return ( + + ) +} +// The secondary menu slides from the right and shows contextual information +// such as the docs sidebar +export default function NavbarMobileSidebarSecondaryMenu() { + const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0 + const secondaryMenu = useNavbarSecondaryMenu() + return ( + <> + {/* edge-case: prevent returning to the primaryMenu when it's empty */} + {!isPrimaryMenuEmpty && ( + secondaryMenu.hide()} /> + )} + {secondaryMenu.content} + + ) +} From 573821a4457f7a8bc3157100f38400c5390bdf1e Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 1 Jun 2023 23:38:35 +0900 Subject: [PATCH 4/6] misc. css updates --- .../src/client/css/custom.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index d3edbd2..dd27450 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -432,6 +432,10 @@ small { } } +.menu__list-item .menu__link { + font-size: var(--lsd-body2-fontSize); +} + .menu__link--active { border-left: 1px solid rgb(var(--lsd-border-primary)); border-radius: 0; @@ -659,6 +663,10 @@ a[class^='sidebarLogo_'] { flex: 1 0; margin: auto; } + + nav.menu { + padding-top: 0; + } } @include utils.responsive('xl', 'up') { @@ -682,6 +690,10 @@ a[class^='sidebarLogo_'] { } } } + + .theme-doc-toc-desktop { + top: calc(var(--ifm-navbar-height)) !important; + } } .container { @@ -927,8 +939,4 @@ a[class^='sidebarLogo_'] { justify-content: center; margin-left: unset; } - - .menu__list-item .menu__link { - font-size: var(--lsd-body2-fontSize); - } } From cad59478aeeaea2d0610899d51a5154522cd4e87 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 2 Jun 2023 01:36:38 +0900 Subject: [PATCH 5/6] add footer to mobile sidebar firstMenu --- .../docusaurus.config.js | 2 +- .../src/client/css/custom.scss | 56 +++++++++++++++++++ .../Navbar/MobileSidebar/Layout/index.tsx | 27 +++++++++ .../MobileSidebar/SecondaryMenu/index.tsx | 1 + 4 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 824e7a5..5fa7a4c 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -111,7 +111,7 @@ const config = { }, { href: '/', - label: 'Temrs & conditions', + label: 'Terms & conditions', }, ], }, diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index dd27450..16ec75c 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -913,6 +913,62 @@ a[class^='sidebarLogo_'] { padding-inline: 0; } + .navbar-sidebar:has(.navbar-sidebar__items--show-secondary) + .navbar-sidebar__brand { + button:first-of-type { + display: none; + } + + button.lsd-icon-button { + margin-left: auto; + } + } + + .navbar-sidebar:not(:has(.navbar-sidebar__items--show-secondary)) { + .navbar-sidebar__items { + height: 180px; + } + + .navbar-sidebar__item { + padding-block: var(--content-padding); + } + + .menu__list { + display: flex; + flex-direction: column; + gap: 8px; + } + + .menu__link { + padding-left: 0; + border-left: none; + + > div { + font-size: var(--lsd-body1-fontSize) !important; + } + } + + .footer > div { + gap: 32px !important; + } + + .footer > button { + display: none; + } + + .footer .container.container-fluid { + margin-bottom: 16px !important; + + > .footer__links { + gap: 0 !important; + } + } + + .footer .footer__links { + gap: 16px !important; + } + } + .navbar-sidebar__brand { height: 60px; padding-block: 0; diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx new file mode 100644 index 0000000..38978b9 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import clsx from 'clsx' +import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal' +import Footer from '@theme/Footer' + +export default function NavbarMobileSidebarLayout({ + header, + primaryMenu, + secondaryMenu, +}) { + const { shown: secondaryMenuShown } = useNavbarSecondaryMenu() + + return ( +
+ {header} +
+
{primaryMenu}
+
{secondaryMenu}
+
+ {!secondaryMenuShown &&
} +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx index 69ba0e3..4e4d344 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx @@ -20,6 +20,7 @@ function SecondaryMenuBackButton(props) { ) } + // The secondary menu slides from the right and shows contextual information // such as the docs sidebar export default function NavbarMobileSidebarSecondaryMenu() { From 8903746d8ee3e1975c5848d1aaae3bc7971657d6 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 2 Jun 2023 01:47:10 +0900 Subject: [PATCH 6/6] move hideOnScroll to base.ts and update css --- packages/docusaurus-playground/docusaurus.config.js | 1 - packages/logos-docusaurus-preset/src/theme-config/base.ts | 1 + packages/logos-docusaurus-theme/src/client/css/custom.scss | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 5fa7a4c..2702c39 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -70,7 +70,6 @@ const config = { href: 'https://github.com/status-im', }, ], - hideOnScroll: true, }, footer: { copyright: 'Nimbus @2023
All Rights Reserved.', diff --git a/packages/logos-docusaurus-preset/src/theme-config/base.ts b/packages/logos-docusaurus-preset/src/theme-config/base.ts index 2820898..69ecd76 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/base.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/base.ts @@ -15,6 +15,7 @@ export const baseThemeConfig: ThemeConfig = { navbar: { title: '', logo: {}, + hideOnScroll: true, }, footer: { logo: {}, diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 16ec75c..29753b4 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -433,7 +433,7 @@ small { } .menu__list-item .menu__link { - font-size: var(--lsd-body2-fontSize); + @include lsd.typography('body2'); } .menu__link--active {