From 132df37206255f09d11aa406cdec861cd28c3d6d Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 31 May 2023 23:55:46 +0900 Subject: [PATCH] update navbar --- package.json | 1 + .../docusaurus.config.js | 18 +++- .../src/theme-config/base.ts | 19 +--- .../src/theme-config/codex.ts | 10 -- .../src/theme-config/logos.ts | 12 --- .../src/client/css/custom.scss | 92 ++++++++++++------- .../client/theme/ColorModeToggle/index.tsx | 59 ++++++++++++ .../theme/ColorModeToggle/styles.module.scss | 35 +++++++ .../theme/DocBreadcrumbs/styles.module.css | 2 +- .../client/theme/DocVersionBadge/index.tsx | 15 +-- .../client/theme/Layout/Provider/index.tsx | 22 +++++ .../src/client/theme/Navbar/Content/index.tsx | 2 +- .../index.tsx} | 17 +++- .../DropdownNavbarItem/styles.module.css | 6 ++ .../client/theme/NavbarItem/NavbarNavLink.tsx | 62 +++++++++++++ .../src/client/theme/Root.tsx | 25 ++++- 16 files changed, 305 insertions(+), 92 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss create mode 100644 packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx rename packages/logos-docusaurus-theme/src/client/theme/NavbarItem/{DropdownNavbarItem.tsx => DropdownNavbarItem/index.tsx} (92%) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/styles.module.css create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink.tsx diff --git a/package.json b/package.json index ec0e178..3b79977 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "watch": "lerna --ignore docusaurus-playground run watch", "build": "lerna --ignore docusaurus-playground run build", "start": "lerna --scope docusaurus-playground run start", + "serve": "lerna --scope docusaurus-playground run serve", "prepare": "husky install", "prettier": "pretty-quick", "prettier:staged": "pretty-quick --staged" diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 72d0ddd..eea1858 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -52,19 +52,27 @@ const config = { themeConfig: /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */ ({ + colorMode: { + defaultMode: 'dark', + disableSwitch: false, + }, navbar: { items: [ { - label: 'Docs', + label: 'About', href: '/docs', }, { - label: 'Features', - href: '#features', + label: 'Blog', + href: '/', }, { - label: 'Showcase', - href: '#showcase', + label: 'Github', + href: '/', + }, + { + type: 'localeDropdown', + position: 'right', }, ], }, diff --git a/packages/logos-docusaurus-preset/src/theme-config/base.ts b/packages/logos-docusaurus-preset/src/theme-config/base.ts index 9589b7f..d88de84 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/base.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/base.ts @@ -10,31 +10,16 @@ export const baseThemeConfig: ThemeConfig = { }, metadata: [], colorMode: { - disableSwitch: true, + disableSwitch: false, defaultMode: 'dark', }, navbar: { title: '', logo: {}, - items: [ - { - type: 'docsVersionDropdown', - position: 'right', - }, - { - type: 'localeDropdown', - position: 'right', - }, - ], }, footer: { logo: {}, - links: [ - { - title: 'Community', - items: [], - }, - ], + links: [], copyright: `Logos, ${new Date().getFullYear()}`, }, prism: { diff --git a/packages/logos-docusaurus-preset/src/theme-config/codex.ts b/packages/logos-docusaurus-preset/src/theme-config/codex.ts index fb1c4d3..ea7d847 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/codex.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/codex.ts @@ -10,16 +10,6 @@ export const codexThemeConfig: typeof baseThemeConfig = { width: 24, height: 26, }, - items: [ - { - type: 'localeDropdown', - position: 'right', - }, - { - type: 'docsVersionDropdown', - position: 'right', - }, - ], }, metadata: [ { name: 'keywords', content: 'codex, storage' }, diff --git a/packages/logos-docusaurus-preset/src/theme-config/logos.ts b/packages/logos-docusaurus-preset/src/theme-config/logos.ts index ea0053d..5000eb1 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/logos.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/logos.ts @@ -9,18 +9,6 @@ export const logosThemeConfig: typeof baseThemeConfig = { src: 'theme/image/logo.svg', height: 26, }, - items: [ - { to: 'docs', label: 'Docs', position: 'left' }, - { to: 'https://logos.co/', label: 'Community', position: 'left' }, - { - type: 'docsVersionDropdown', - position: 'right', - }, - { - type: 'localeDropdown', - position: 'right', - }, - ], }, metadata: [ { name: 'keywords', content: 'Logos' }, diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index d90bfb7..bffc066 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -371,6 +371,7 @@ small { .navbar__inner { align-items: center; + padding-inline: 0 !important; } .row { @@ -443,6 +444,10 @@ div.w-10 > a:not(:last-child) { align-items: center; } +.navbar__left-items > .navbar__item:first-of-type { + padding-left: 0; +} + .dropdown > .navbar__link:after { display: none; } @@ -484,6 +489,19 @@ div.w-10 > a:not(:last-child) { padding: 24px; } +.theme-doc-version-badge { + padding: 4px 8px; + background: transparent; + color: rgb(var(--lsd-text-primary)); + border: 1px solid rgb(var(--lsd-border-primary)); + margin-bottom: 16px; +} + +.navbar__right-items { + display: flex; + align-items: center; +} + @include utils.responsive('lg', 'down') { .grid { grid-template-columns: repeat(2, 1fr); @@ -495,11 +513,28 @@ div.w-10 > a:not(:last-child) { .navbar { display: flex; - padding-inline: 0; + padding-inline: 0 !important; height: 56px; padding: 12px 16px; } + .navbar__toggle { + display: flex; + align-items: center; + justify-content: center; + margin: 0; + border: 1px solid rgb(var(--lsd-border-primary)); + border-left: none; + width: 32px; + height: 32px; + box-sizing: border-box; + + svg { + width: 14px; + height: 14px; + } + } + .footer { padding: 24px 16px; } @@ -554,10 +589,6 @@ div.w-10 > a:not(:last-child) { padding-inline: 0 !important; } - .navbar__inner { - padding-inline: 0 !important; - } - .navbar__left { display: flex; } @@ -573,6 +604,7 @@ div.w-10 > a:not(:last-child) { main > .container { padding-inline: 0 !important; + padding-bottom: 200px !important; } & > div { @@ -593,6 +625,22 @@ div.w-10 > a:not(:last-child) { } } } + + .navbar__inner { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + + .navbar__left { + flex-grow: 0; + flex-basis: calc(1 / 12 * 100%); + } + + .navbar__left-items { + flex: 1 0; + margin: auto; + } } @include utils.responsive('xl', 'up') { @@ -603,7 +651,6 @@ div.w-10 > a:not(:last-child) { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1rem; - padding-inline: 0; aside { width: auto; @@ -726,7 +773,7 @@ div.w-10 > a:not(:last-child) { } .navbar { - padding: 12px 0; + padding: 12px 16px; } .navbar__inner { @@ -734,55 +781,36 @@ div.w-10 > a:not(:last-child) { padding: 0 var(--content-padding); } -@include utils.responsive('lg', 'up') { - .navbar__inner { - display: flex; - flex-direction: row; - justify-content: flex-start; - } - - .navbar__left { - flex-grow: 0; - flex-basis: calc(1 / 12 * 100%); - } - - .navbar__left-items { - flex: 1 0; - } -} - @include utils.responsive('xl', 'up') { .navbar__inner { display: grid; gap: 16px; - grid-template-columns: repeat(18, 1fr); - padding: 0 var(--content-padding); + grid-template-columns: repeat(24, 1fr); + padding: 0; } .navbar__left { - grid-column: 1 / 5; + grid-column: 1 / 6; display: flex; flex-direction: row; align-items: center; } .navbar__left-items { - grid-column: 5 / 14; + grid-column: 6 / 20; } .navbar__right-items { - grid-column: 14 / 19; - display: flex; + grid-column: 20 / 25; flex-direction: row; justify-content: flex-end; + gap: 16px; } } @include utils.responsive('lg', 'down') { .main-wrapper > div { display: block; - > main { - } } .main-wrapper { diff --git a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx new file mode 100644 index 0000000..4451f02 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import clsx from 'clsx' +import useIsBrowser from '@docusaurus/useIsBrowser' +import { translate } from '@docusaurus/Translate' +import IconLightMode from '@theme/Icon/LightMode' +import IconDarkMode from '@theme/Icon/DarkMode' +import styles from './styles.module.scss' + +function ColorModeToggle({ className, buttonClassName, value, onChange }) { + const isBrowser = useIsBrowser() + const title = translate( + { + message: 'Switch between dark and light mode (currently {mode})', + id: 'theme.colorToggle.ariaLabel', + description: 'The ARIA label for the navbar color mode toggle', + }, + { + mode: + value === 'dark' + ? translate({ + message: 'dark mode', + id: 'theme.colorToggle.ariaLabel.mode.dark', + description: 'The name for the dark color mode', + }) + : translate({ + message: 'light mode', + id: 'theme.colorToggle.ariaLabel.mode.light', + description: 'The name for the light color mode', + }), + }, + ) + return ( +
+ +
+ ) +} + +export default React.memo(ColorModeToggle) diff --git a/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss new file mode 100644 index 0000000..d12d1d3 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/styles.module.scss @@ -0,0 +1,35 @@ +.toggle { + width: 32px; + height: 32px; + border: 1px solid rgb(var(--lsd-border-primary)); + box-sizing: border-box; + + svg { + width: 14px; + height: 14px; + } +} + +.toggleButton { + -webkit-tap-highlight-color: transparent; + align-items: center; + display: flex; + justify-content: center; + width: 100%; + height: 100%; + border-radius: 50%; + transition: background var(--ifm-transition-fast); +} + +.toggleButton:hover { + background: var(--ifm-color-emphasis-200); +} + +[data-theme='light'] .darkToggleIcon, +[data-theme='dark'] .lightToggleIcon { + display: none; +} + +.toggleButtonDisabled { + cursor: not-allowed; +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css index 72da467..cde1b01 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/styles.module.css @@ -1,4 +1,4 @@ .breadcrumbsContainer { --ifm-breadcrumb-size-multiplier: 0.8; - margin-bottom: 0.8rem; + margin-bottom: 24px; } diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx index e5c00e5..94d7d19 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocVersionBadge/index.tsx @@ -4,6 +4,7 @@ import Translate from '@docusaurus/Translate' import { ThemeClassNames } from '@docusaurus/theme-common' import { useDocsVersion } from '@docusaurus/theme-common/internal' import styles from './style.module.scss' +import { Typography } from '@acid-info/lsd-react' export default function DocVersionBadge({ className }) { const versionMetadata = useDocsVersion() @@ -17,12 +18,14 @@ export default function DocVersionBadge({ className }) { styles.badge, )} > - - {'Version: {versionLabel}'} - + + + {'Version: {versionLabel}'} + + ) } diff --git a/packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx new file mode 100644 index 0000000..75938ef --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/Layout/Provider/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { composeProviders } from '@docusaurus/theme-common' +import { + AnnouncementBarProvider, + DocsPreferredVersionContextProvider, + ScrollControllerProvider, + NavbarProvider, + PluginHtmlClassNameProvider, +} from '@docusaurus/theme-common/internal' +import type { Props } from '@theme/Layout/Provider' + +const Provider = composeProviders([ + AnnouncementBarProvider, + ScrollControllerProvider, + DocsPreferredVersionContextProvider, + PluginHtmlClassNameProvider, + NavbarProvider, +]) + +export default function LayoutProvider({ children }: Props): JSX.Element { + return {children} +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx index e6975a6..5086a4d 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx @@ -50,7 +50,6 @@ export default function NavbarContent() { return (
- {!mobileSidebar.disabled && }
@@ -66,6 +65,7 @@ export default function NavbarContent() { )} + {!mobileSidebar.disabled && }
) diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx similarity index 92% rename from packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx rename to packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx index 456b304..7b97ad6 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem/index.tsx @@ -8,7 +8,8 @@ import { import { isSamePath, useLocalPathname } from '@docusaurus/theme-common/internal' import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink' import NavbarItem from '@theme/NavbarItem' -import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react' +import { ArrowDownIcon } from '@acid-info/lsd-react' +import styles from './styles.module.css' function isItemActive(item, localPathname) { if (isSamePath(item.to, localPathname)) { @@ -57,10 +58,16 @@ function DropdownNavbarItemDesktop({ return (
+ {label} + {isExternalLink && ( + + )} + + ), + } + if (href) { + return ( + + ) + } + return ( + + activeBaseRegex + ? isRegexpStringMatch(activeBaseRegex, location.pathname) + : location.pathname.startsWith(activeBaseUrl), + })} + {...props} + {...linkContentProps} + /> + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx index c0ec8fe..c2fdb2a 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx @@ -1,11 +1,30 @@ +import { defaultThemes, ThemeProvider } from '@acid-info/lsd-react' +import { + ColorModeProvider, + useColorMode, +} from '@docusaurus/theme-common/internal' import React from 'react' -import { ThemeProvider, defaultThemes } from '@acid-info/lsd-react' import styles from './style.module.css' -export default function Root({ children }) { +const Content = ({ children }) => { + const colorMode = useColorMode() return ( - +
{children}
 ) } + +export default function Root({ children }) { + return ( + + {children} + + ) +}