From d5fd15ecbe76ef3a5543d6f18cf0ab7098041e07 Mon Sep 17 00:00:00 2001
From: tsmrachel <t.s.m.rachel@gmail.com>
Date: Thu, 24 Jan 2019 06:13:27 +0800
Subject: [PATCH] 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    |  4 +++
 docs/guides-navigation.md  | 11 ++++++
 v1/lib/core/nav/SideNav.js | 74 ++++++++++++++++++++++++++++----------
 v1/lib/static/css/main.css | 16 +++++++++
 v1/website/siteConfig.js   |  1 +
 5 files changed, 87 insertions(+), 19 deletions(-)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index fe18a7ceac..5c1e0834e7 100644
--- a/docs/api-site-config.md
+++ b/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.
diff --git a/docs/guides-navigation.md b/docs/guides-navigation.md
index ff8f2e3199..d35b9b25fa 100644
--- a/docs/guides-navigation.md
+++ b/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,
+  ...
+}
+```
diff --git a/v1/lib/core/nav/SideNav.js b/v1/lib/core/nav/SideNav.js
index cfe83e8055..21cdb75597 100644
--- a/v1/lib/core/nav/SideNav.js
+++ b/v1/lib/core/nav/SideNav.js
@@ -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');
diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
index e0e5d963be..6761514c95 100644
--- a/v1/lib/static/css/main.css
+++ b/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;
diff --git a/v1/website/siteConfig.js b/v1/website/siteConfig.js
index 432414883d..d94166d8ee 100644
--- a/v1/website/siteConfig.js
+++ b/v1/website/siteConfig.js
@@ -72,6 +72,7 @@ const siteConfig = {
   enableUpdateTime: true,
   enableUpdateBy: true,
   customDocsPath: '../docs',
+  docsSideNavCollapsible: true,
 };
 
 module.exports = siteConfig;