-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(theme-classic): split sidebar into smaller parts (#6844)
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
- Loading branch information
Showing
12 changed files
with
366 additions
and
228 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React from 'react'; | ||
import clsx from 'clsx'; | ||
import IconArrow from '@theme/IconArrow'; | ||
import {translate} from '@docusaurus/Translate'; | ||
import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton'; | ||
|
||
import styles from './styles.module.css'; | ||
|
||
export default function CollapseButton({onClick}: Props): JSX.Element { | ||
return ( | ||
<button | ||
type="button" | ||
title={translate({ | ||
id: 'theme.docs.sidebar.collapseButtonTitle', | ||
message: 'Collapse sidebar', | ||
description: 'The title attribute for collapse button of doc sidebar', | ||
})} | ||
aria-label={translate({ | ||
id: 'theme.docs.sidebar.collapseButtonAriaLabel', | ||
message: 'Collapse sidebar', | ||
description: 'The title attribute for collapse button of doc sidebar', | ||
})} | ||
className={clsx( | ||
'button button--secondary button--outline', | ||
styles.collapseSidebarButton, | ||
)} | ||
onClick={onClick}> | ||
<IconArrow className={styles.collapseSidebarButtonIcon} /> | ||
</button> | ||
); | ||
} |
44 changes: 44 additions & 0 deletions
44
...es/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
:root { | ||
--collapse-button-bg-color-dark: #2e333a; | ||
} | ||
|
||
@media (min-width: 997px) { | ||
.collapseSidebarButton { | ||
display: block !important; | ||
background-color: var(--ifm-button-background-color); | ||
height: 40px; | ||
position: sticky; | ||
bottom: 0; | ||
border-radius: 0; | ||
border: 1px solid var(--ifm-toc-border-color); | ||
} | ||
|
||
.collapseSidebarButtonIcon { | ||
transform: rotate(180deg); | ||
margin-top: 4px; | ||
} | ||
|
||
[dir='rtl'] .collapseSidebarButtonIcon { | ||
transform: rotate(0); | ||
} | ||
|
||
[data-theme='dark'] .collapseSidebarButton { | ||
background-color: var(--collapse-button-bg-color-dark); | ||
} | ||
|
||
[data-theme='dark'] .collapseSidebarButton:hover, | ||
[data-theme='dark'] .collapseSidebarButton:focus { | ||
background-color: var(--ifm-color-emphasis-200); | ||
} | ||
} | ||
|
||
.collapseSidebarButton { | ||
display: none; | ||
} |
55 changes: 55 additions & 0 deletions
55
packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React, {useState} from 'react'; | ||
import clsx from 'clsx'; | ||
import { | ||
ThemeClassNames, | ||
useAnnouncementBar, | ||
useScrollPosition, | ||
} from '@docusaurus/theme-common'; | ||
import DocSidebarItems from '@theme/DocSidebarItems'; | ||
import type {Props} from '@theme/DocSidebar/Desktop/Content'; | ||
|
||
import styles from './styles.module.css'; | ||
|
||
function useShowAnnouncementBar() { | ||
const {isActive} = useAnnouncementBar(); | ||
const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive); | ||
|
||
useScrollPosition( | ||
({scrollY}) => { | ||
if (isActive) { | ||
setShowAnnouncementBar(scrollY === 0); | ||
} | ||
}, | ||
[isActive], | ||
); | ||
return isActive && showAnnouncementBar; | ||
} | ||
|
||
export default function DocSidebarDesktopContent({ | ||
path, | ||
sidebar, | ||
className, | ||
}: Props): JSX.Element { | ||
const showAnnouncementBar = useShowAnnouncementBar(); | ||
|
||
return ( | ||
<nav | ||
className={clsx( | ||
'menu thin-scrollbar', | ||
styles.menu, | ||
showAnnouncementBar && styles.menuWithAnnouncementBar, | ||
className, | ||
)}> | ||
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}> | ||
<DocSidebarItems items={sidebar} activePath={path} level={1} /> | ||
</ul> | ||
</nav> | ||
); | ||
} |
17 changes: 17 additions & 0 deletions
17
packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/styles.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
@media (min-width: 997px) { | ||
.menu { | ||
flex-grow: 1; | ||
padding: 0.5rem; | ||
} | ||
|
||
.menuWithAnnouncementBar { | ||
margin-bottom: var(--docusaurus-announcement-bar-height); | ||
} | ||
} |
38 changes: 38 additions & 0 deletions
38
packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React from 'react'; | ||
import clsx from 'clsx'; | ||
import {useThemeConfig} from '@docusaurus/theme-common'; | ||
import Logo from '@theme/Logo'; | ||
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton'; | ||
import Content from '@theme/DocSidebar/Desktop/Content'; | ||
import type {Props} from '@theme/DocSidebar/Desktop'; | ||
|
||
import styles from './styles.module.css'; | ||
|
||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) { | ||
const { | ||
navbar: {hideOnScroll}, | ||
hideableSidebar, | ||
} = useThemeConfig(); | ||
|
||
return ( | ||
<div | ||
className={clsx( | ||
styles.sidebar, | ||
hideOnScroll && styles.sidebarWithHideableNavbar, | ||
isHidden && styles.sidebarHidden, | ||
)}> | ||
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />} | ||
<Content path={path} sidebar={sidebar} /> | ||
{hideableSidebar && <CollapseButton onClick={onCollapse} />} | ||
</div> | ||
); | ||
} | ||
|
||
export default React.memo(DocSidebarDesktop); |
50 changes: 50 additions & 0 deletions
50
packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
@media (min-width: 997px) { | ||
.sidebar { | ||
display: flex; | ||
flex-direction: column; | ||
max-height: 100vh; | ||
height: 100%; | ||
position: sticky; | ||
top: 0; | ||
padding-top: var(--ifm-navbar-height); | ||
width: var(--doc-sidebar-width); | ||
transition: opacity 50ms ease; | ||
} | ||
|
||
.sidebarWithHideableNavbar { | ||
padding-top: 0; | ||
} | ||
|
||
.sidebarHidden { | ||
opacity: 0; | ||
height: 0; | ||
overflow: hidden; | ||
visibility: hidden; | ||
} | ||
|
||
.sidebarLogo { | ||
display: flex !important; | ||
align-items: center; | ||
margin: 0 var(--ifm-navbar-padding-horizontal); | ||
min-height: var(--ifm-navbar-height); | ||
max-height: var(--ifm-navbar-height); | ||
color: inherit !important; | ||
text-decoration: none !important; | ||
} | ||
|
||
.sidebarLogo img { | ||
margin-right: 0.5rem; | ||
height: 2rem; | ||
} | ||
} | ||
|
||
.sidebarLogo { | ||
display: none; | ||
} |
51 changes: 51 additions & 0 deletions
51
packages/docusaurus-theme-classic/src/theme/DocSidebar/Mobile/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React from 'react'; | ||
import clsx from 'clsx'; | ||
import { | ||
MobileSecondaryMenuFiller, | ||
type MobileSecondaryMenuComponent, | ||
ThemeClassNames, | ||
} from '@docusaurus/theme-common'; | ||
import DocSidebarItems from '@theme/DocSidebarItems'; | ||
import type {Props} from '@theme/DocSidebar/Mobile'; | ||
|
||
// eslint-disable-next-line react/function-component-definition | ||
const DocSidebarMobileSecondaryMenu: MobileSecondaryMenuComponent<Props> = ({ | ||
toggleSidebar, | ||
sidebar, | ||
path, | ||
}) => ( | ||
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}> | ||
<DocSidebarItems | ||
items={sidebar} | ||
activePath={path} | ||
onItemClick={(item) => { | ||
// Mobile sidebar should only be closed if the category has a link | ||
if (item.type === 'category' && item.href) { | ||
toggleSidebar(); | ||
} | ||
if (item.type === 'link') { | ||
toggleSidebar(); | ||
} | ||
}} | ||
level={1} | ||
/> | ||
</ul> | ||
); | ||
|
||
function DocSidebarMobile(props: Props) { | ||
return ( | ||
<MobileSecondaryMenuFiller | ||
component={DocSidebarMobileSecondaryMenu} | ||
props={props} | ||
/> | ||
); | ||
} | ||
|
||
export default React.memo(DocSidebarMobile); |
Oops, something went wrong.