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

feat(v2): enable subcategories (#1021)

Browse source 
* feat(v2): enable subcategories

* nits

* eslint issue https://github.com/prettier/prettier/issues/3734
This commit is contained in:
Endilie Yacop Sucipto 2018-10-08 17:50:28 +08:00 • committed by GitHub
parent 954456088c
commit f62029c30e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 150 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

75
v2/lib/theme/Sidebar/index.js
View file

@ -12,37 +12,56 @@ function Sidebar(props) {
return null;
}
const thisSidebar = docsSidebars[sidebar];
const renderItemLink = 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 activeItem = linkID === thisID;
return (
<li key={linkID}>
<Link
className={classnames(styles.sidebarLink, {
[styles.sidebarLinkActive]: activeItem,
})}
to={linkMetadata.permalink}>
{linkMetadata.sidebar_label || linkMetadata.title}
</Link>
</li>
);
};
const renderCategory = categoryName => {
const category = thisSidebar[categoryName];
return (
<div className={styles.sidebarGroup} key={categoryName}>
<h3 className={styles.sidebarGroupTitle}>{categoryName}</h3>
<ul className={styles.sidebarList}>
{Array.isArray(category)
? category.map(renderItemLink)
: Object.keys(category).map(subCategoryName => (
<div className={styles.sidebarSubGroup} key={subCategoryName}>
<h4 className={styles.sidebarSubGroupTitle}>
{subCategoryName}
</h4>
<ul className={styles.sidebarList}>
{category[subCategoryName].map(renderItemLink)}
</ul>
</div>
))}
</ul>
</div>
);
};
return (
thisSidebar && (
<div className={styles.sidebar}>
{Object.keys(thisSidebar).map(categoryName => (
<div className={styles.sidebarGroup} key={categoryName}>
<h3 className={styles.sidebarGroupTitle}>{categoryName}</h3>
<ul className={styles.sidebarList}>
{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 activeItem = linkID === thisID;
return (
<li key={linkID}>
<Link
className={classnames(styles.sidebarLink, {
[styles.sidebarLinkActive]: activeItem,
})}
to={linkMetadata.permalink}>
{linkMetadata.sidebar_label || linkMetadata.title}
</Link>
</li>
);
})}
</ul>
</div>
))}
{Object.keys(thisSidebar).map(renderCategory)}
</div>
)
);