feat : facebook#1084 Collapsus - The Collapsible Menu

tsmrachel · Nov 25, 2018 · cda8d85 · cda8d85
1 parent 54b7662
commit cda8d85
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 19 deletions.
diff --git 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">&#9660;</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,28 @@ 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.children;
+              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
@@ -1595,6 +1595,22 @@ input::placeholder {
 /* End of Docs Navigation */
 
 /* Start of Docs Sidebar */
+.hide {
+  display: none;
+}
+
+.collapsible .arrow {
+  float: right;
+  margin-right: 5px;
+  transform : rotate(0deg);
+  transition : transform 200ms linear;
+}
+
+.collapsible .arrow.rotate {
+  transform : rotate(-90deg);
+  transition : transform 200ms linear;
+}
+
 @media only screen and (max-width: 1023px) {
   .docsNavContainer {
     background: #fff;

diff --git a/v1/website/siteConfig.js b/v1/website/siteConfig.js
@@ -72,6 +72,7 @@ const siteConfig = {
   enableUpdateTime: true,
   enableUpdateBy: true,
   customDocsPath: '../docs',
+  docsSideNavCollapsible: false,
 };
 
 module.exports = siteConfig;