3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-29 14:38:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): responsive sidebar (#1562)

Browse source 
* feat(v2): responsive sidebar

* feat(v2): separate css modules from Infima

* fix(v2): sidebar a11y
This commit is contained in:
Yangshun Tay 2019-06-05 10:58:04 -07:00 • committed by GitHub
parent ec69460b4f
commit 5962cda8b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 123 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

61
packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/index.js
View file

@ -5,13 +5,17 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {useState} from 'react';
import classnames from 'classnames';
import Link from '@docusaurus/Link'; // eslint-disable-line
import './styles.css';
import styles from './styles.module.css';
const MOBILE_TOGGLE_SIZE = 24;
function DocSidebar(props) {
const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false);
const {docsMetadata, sidebar} = props;
if (!sidebar) {
@ -59,7 +63,10 @@ function DocSidebar(props) {
<Link
activeClassName="menu__link--active"
className="menu__link"
to={item.href}>
to={item.href}
onClick={() => {
setShowResponsiveSidebar(false);
}}>
{item.label}
</Link>
</li>
@ -72,10 +79,50 @@ function DocSidebar(props) {
};
return (
<div className="menu menu--responsive sidebar">
<ul className="menu__list">
{thisSidebar.map(item => renderItem(item, {root: true}))}
</ul>
<div className={styles.sidebar}>
<div
className={classnames('menu', 'menu--responsive', {
'menu--show': showResponsiveSidebar,
})}>
<button
aria-label={showResponsiveSidebar ? 'Close Menu' : 'Open Menu'}
className="button button--secondary button--sm menu__button"
type="button"
onClick={() => {
setShowResponsiveSidebar(!showResponsiveSidebar);
}}>
{showResponsiveSidebar ? (
<span
className={classnames(
styles.sidebarMenuIcon,
styles.sidebarMenuCloseIcon,
)}>
&times;
</span>
) : (
<svg
className={styles.sidebarMenuIcon}
xmlns="http://www.w3.org/2000/svg"
height={MOBILE_TOGGLE_SIZE}
width={MOBILE_TOGGLE_SIZE}
viewBox="0 0 32 32"
role="img"
focusable="false">
<title>Menu</title>
<path
stroke="currentColor"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="2"
d="M4 7h22M4 15h22M4 23h22"
/>
</svg>
)}
</button>
<ul className="menu__list">
{thisSidebar.map(item => renderItem(item, {root: true}))}
</ul>
</div>
</div>
);
}