feat: collapsible categories (#1128)

* 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

docs/api-site-config.md

@@ -139,6 +139,10 @@ An option to disable showing the title in the header next to the header icon. Ex
 
 An option to disable showing the tagline in the title of main pages. Exclude this field to keep page titles as `Title • Tagline`. Set to `true` to make page titles just `Title`.
 
+#### `docsSideNavCollapsible` [boolean]
+
+Set this to `true` if you want to be able to expand/collapse the links and subcategories in the sidebar.
+
 #### `editUrl` [string]
 
 URL for editing docs, usage example: `editUrl + 'en/doc1.md'`. If this field is omitted, there will be no "Edit this Doc" button for each document.

docs/guides-navigation.md

@@ -272,3 +272,14 @@ We support secondary on-page navigation so you can more easily see the topics as
 ```
 
 Currently, `'separate'` is the only option available for this field. This provides a separate navigation on the right side of the page.
+
+## Collapsible Categories
+
+For sites with a sizable amount of content, we support the option to expand/collapse the links and subcategories under categories. To enable this feature, set the `docsSideNavCollapsible` site configuration [option](api-site-config.md#optional-fields) in `siteConfig.js` to true.
+
+```js
+{
+  docsSideNavCollapsible: true,
+  ...
+}
+```

v1/lib/core/nav/SideNav.js

@@ -61,12 +61,24 @@ class SideNav extends React.Component {
     return null;
   }
 
-  renderCategory = categoryItem => (
+  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="navGroupCategoryTitle">
+        <h3 className={categoryClassName}>
           {this.getLocalizedCategoryString(categoryItem.title)}
+          {arrow}
         </h3>
-      <ul>
+        <ul className={ulClassName}>
           {categoryItem.children.map(item => {
             switch (item.type) {
               case 'LINK':
@@ -80,6 +92,7 @@ class SideNav extends React.Component {
         </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');

v1/lib/static/css/main.css

@@ -1596,6 +1596,22 @@ input::placeholder {
 /* End of Docs Navigation */
 
 /* Start of Docs Sidebar */
+.hide {
+  display: none;
+}
+
+.collapsible .arrow {
+  cursor: pointer;
+  float: right;
+  margin-right: 5px;
+  transform: rotate(90deg);
+  transition: transform 200ms linear;
+}
+
+.collapsible .arrow.rotate {
+  transform: rotate(180deg);
+}
+
 @media only screen and (max-width: 1023px) {
   .docsNavContainer {
     background: #fff;

v1/website/siteConfig.js

@@ -72,6 +72,7 @@ const siteConfig = {
   enableUpdateTime: true,
   enableUpdateBy: true,
   customDocsPath: '../docs',
+  docsSideNavCollapsible: true,
 };
 
 module.exports = siteConfig;