From 243e7a538eb27aa2e4b6b352d861e44ed83a2ef2 Mon Sep 17 00:00:00 2001
From: Han Xiao <han.xiao@jina.ai>
Date: Tue, 21 Apr 2020 16:03:57 +0200
Subject: [PATCH] docs: add expandable btn

---
 docs/_static/main.css     | 24 ++++++++++++++++++++++++
 docs/template/layout.html | 18 ++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/docs/_static/main.css b/docs/_static/main.css
index a99801d956547..227fdc5b3887f 100644
--- a/docs/_static/main.css
+++ b/docs/_static/main.css
@@ -17,6 +17,26 @@
     color: white;
 }
 
+#showhide-navbar-btn {
+    left: 23rem;
+    position: fixed;
+    display: inline;
+    background: #099;
+    top: 0;
+    z-index: 99;
+    padding: 15px;
+    border-radius: 0 10px 10px 0;
+    cursor: context-menu;
+    /* opacity: 0.2; */
+}
+
+
+#showhide-navbar-btn:before {
+    content: "\f0c9";
+    vertical-align: middle;
+    color: white;
+    font-family: FontAwesome;
+}
 
 .wy-menu-vertical li.on a span.toctree-expand, .wy-menu-vertical li.current > a span.toctree-expand {
     /* line-height: 1.6em; */
@@ -195,6 +215,10 @@ body {
     .table-of-contents {
         display: none;
     }
+
+    #showhide-navbar-btn {
+        display: none;
+    }
 }
 
 
diff --git a/docs/template/layout.html b/docs/template/layout.html
index 809c16a349cfb..982313f16938f 100644
--- a/docs/template/layout.html
+++ b/docs/template/layout.html
@@ -194,6 +194,9 @@
         </a>
       </div>
 
+      <div id="showhide-navbar-btn" onclick="showhide_navbar()">
+      </div>
+
       <div class="wy-nav-content">
       {%- block content %}
         {% if theme_style_external_links|tobool %}
@@ -228,6 +231,21 @@
       jQuery(function () {
           SphinxRtdTheme.Navigation.enable({{ 'true' if theme_sticky_navigation|tobool else 'false' }});
       });
+
+      function showhide_navbar() {
+      var x = document.getElementsByClassName("wy-nav-side")[0];
+      var y = document.getElementsByClassName("wy-nav-content-wrap")[0];
+      var z = document.getElementById("showhide-navbar-btn");
+      if (x.style.display === "none") {
+        x.style.display = "block";
+        y.style.marginLeft = "23rem";
+        z.style.left = "23rem";
+      } else {
+        x.style.display = "none";
+        y.style.marginLeft = "0";
+        z.style.left = "0px";
+      }
+    }
   </script>
 
   {# Do not conflict with RTD insertion of analytics script #}