3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-20 12:37:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: collapsible categories (#1128)

Browse source 
* feat : #1084 Collapsus - The Collapsible Menu

* updated docs

* fixed prettier

* fix for category not auto-expanding upon navigating to a subcategory under it

* as requested by endiliey. Do not merge this commit.

* Update api-site-config.md

* Update guides-navigation.md

* Update SideNav.js

* Update main.css

* Update SideNav.js

* Delete subcategory1.md

* Delete subcategory2.md

* Update sidebars.json
This commit is contained in:
tsmrachel 2019-01-24 06:13:27 +08:00 • committed by Yangshun Tay
parent c27a430529
commit d5fd15ecbe
5 changed files with 87 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

74
v1/lib/core/nav/SideNav.js
View file

@ -61,25 +61,38 @@ class SideNav extends React.Component {
return null;
}
renderCategory = categoryItem => (
<div className="navGroup" key={categoryItem.title}>
<h3 className="navGroupCategoryTitle">
{this.getLocalizedCategoryString(categoryItem.title)}
</h3>
<ul>
{categoryItem.children.map(item => {
switch (item.type) {
case 'LINK':
return this.renderItemLink(item);
case 'SUBCATEGORY':
return this.renderSubcategory(item);
default:
return null;
}
})}
</ul>
</div>
);
renderCategory = categoryItem => {
let ulClassName = '';
let categoryClassName = 'navGroupCategoryTitle';
let arrow;
if (siteConfig.docsSideNavCollapsible) {
categoryClassName += ' collapsible';
ulClassName = 'hide';
arrow = <span className="arrow">&#8963;</span>;
}
return (
<div className="navGroup" key={categoryItem.title}>
<h3 className={categoryClassName}>
{this.getLocalizedCategoryString(categoryItem.title)}
{arrow}
</h3>
<ul className={ulClassName}>
{categoryItem.children.map(item => {
switch (item.type) {
case 'LINK':
return this.renderItemLink(item);
case 'SUBCATEGORY':
return this.renderSubcategory(item);
default:
return null;
}
})}
</ul>
</div>
);
};
renderSubcategory = subcategoryItem => (
<div className="navGroup subNavGroup" key={subcategoryItem.title}>
@ -133,6 +146,29 @@ class SideNav extends React.Component {
<script
dangerouslySetInnerHTML={{
__html: `
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');