3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-01 18:32:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

style(v2): basic sidebar component (#1020)

Browse source
This commit is contained in:
Yangshun Tay 2018-10-07 01:23:41 -07:00 • committed by Endilie Yacop Sucipto
parent aae5c4dc85
commit 2e9656917c
7 changed files with 110 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

55
v2/lib/theme/Docs/index.js
View file

@ -3,50 +3,13 @@ import React from 'react';
import {Link} from 'react-router-dom';
import Helmet from 'react-helmet';
import Layout from '@theme/Layout'; // eslint-disable-line
import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
import Layout from '@theme/Layout'; // eslint-disable-line
import Sidebar from '@theme/Sidebar'; // eslint-disable-line
import styles from './styles.css';
export default class Docs extends React.Component {
renderSidebar(metadata, docsSidebars, docsMetadatas) {
const {sidebar, language, id: thisID} = metadata;
if (!sidebar || !docsSidebars) {
return null;
}
const thisSidebar = docsSidebars[sidebar];
return (
thisSidebar &&
Object.keys(thisSidebar).map(categoryName => {
return (
<div className="navGroup" key={categoryName}>
<h3 className="navGroupCategoryTitle">{categoryName}</h3>
<ul>
{thisSidebar[categoryName].map(rawLinkID => {
const linkID = (language ? `${language}-` : '') + rawLinkID;
const linkMetadata = docsMetadatas[linkID];
if (!linkMetadata) {
throw new Error(
`Improper sidebars.json file, document with id '${linkID}' not found.`,
);
}
const linkClassName =
linkID === thisID ? 'navListItemActive' : 'navListItem';
return (
<li className={linkClassName} key={linkID}>
<Link className="navItem" to={linkMetadata.permalink}>
{linkMetadata.sidebar_label || linkMetadata.title}
</Link>
</li>
);
})}
</ul>
</div>
);
})
);
}
render() {
const {
route,
@ -64,9 +27,17 @@ export default class Docs extends React.Component {
{language && <meta name="docsearch:language" content={language} />}
{version && <meta name="docsearch:version" content={version} />}
</Helmet>
<div>{this.renderSidebar(metadata, docsSidebars, docsMetadatas)}</div>
<div className={styles.mainContainer}>{this.props.children}</div>
<DocsPaginator docsMetadatas={docsMetadatas} metadata={metadata} />
<div className={styles.mainContainer}>
<Sidebar
docsMetadatas={docsMetadatas}
docsSidebars={docsSidebars}
metadata={metadata}
/>
<div className={styles.docContent}>
{this.props.children}
<DocsPaginator docsMetadatas={docsMetadatas} metadata={metadata} />
</div>
</div>
</Layout>
);
}