Make docs nav sidebar sticky, add on-page nav

website/core/Footer.js

@@ -63,6 +63,8 @@ class Footer extends React.Component {
             <a href="http://henryzoo.com/babel.github.io">Old 5.x Site</a>
           </div>
         </section>
+        <script src={this.props.config.baseUrl + "js/stickyfill.min.js"} />
+        <script src={this.props.config.baseUrl + "js/sidebar.js"} />
       </footer>
     );
   }

website/static/css/babel.css

@@ -138,4 +138,89 @@ a.anchor {
 }
 footer.nav-footer {
   background: #767676;
-}
+}
+
+/* ####### DOCS SIDEBAR ####### */
+
+nav.toc .toggleNav ul li a.navItemActive {
+  font-weight: bold;
+}
+
+@media only screen and (min-width: 1024px) {
+  .sideNavVisible .docMainWrapper {
+    max-width: 100%;
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  .docsNavContainer {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 53px;
+    height: calc(100vh - 53px);
+    width: 240px;
+    margin-top: 0;
+  }
+
+  .container.docsNavContainer {
+    overflow-y: scroll;
+  }
+
+  nav.toc:last-child {
+    padding-bottom: 0;
+  }
+
+  .sideNavVisible .navPusher .mainContainer {
+    padding-bottom: 50px;
+  }
+}
+
+/* ####### PAGE SIDEBAR ####### */
+.pageNav {
+  display: none;
+}
+
+.pageNav::-webkit-scrollbar {
+  display: none;
+}
+
+@media only screen and (min-width: 1024px) {
+  a.anchor {
+    top: -92px;
+  }
+
+  .pageNav {
+    display: block;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 90px;
+    margin: 0 20px 50px 40px;
+    flex: 0 1 240px;
+    align-self: flex-start;
+    overflow-y: auto;
+    max-height: calc(100vh - 90px);
+  }
+
+  .pageNav > ul {
+    border-left: 1px solid #eee;
+    padding-left: 15px;
+  }
+
+  .pageNav a {
+    color: #717171;
+  }
+
+  .pageNav ul li {
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .pageNav ul ul {
+    padding: 0.5rem 0 0 20px;
+  }
+
+  .pageNav ul ul li {
+    margin-bottom: 0.5rem;
+  }
+}

website/static/js/sidebar.js

@@ -0,0 +1,58 @@
+(function() {
+  var headings = [];
+  var current;
+
+  Array.prototype.slice
+    .call(document.querySelectorAll("article h2, article h3"))
+    .forEach(function(heading) {
+      var anchor = heading.querySelector("a.hash-link");
+      if (!anchor) return;
+
+      var id = anchor.getAttribute("href");
+      var isSubHeading = heading.tagName.toUpperCase() !== "H2";
+
+      var value = {
+        id: id,
+        text: heading.textContent,
+        children: [],
+      };
+
+      if (!isSubHeading) {
+        headings.push(value);
+        current = value;
+      } else {
+        current && current.children.push(value);
+      }
+    });
+
+  function renderHeadings(headings) {
+    var template = "";
+
+    headings.forEach(function(heading) {
+      template += '<li><a href="' + heading.id + '">' + heading.text + "</a>";
+
+      if (heading.children.length) {
+        template += "<ul>";
+        template += renderHeadings(heading.children);
+        template += "</ul>";
+      }
+
+      navContent += "</li>";
+    }, this);
+
+    return template;
+  }
+
+  var navContent = renderHeadings(headings);
+
+  var pageNav = this.document.createElement("div");
+  pageNav.className = "pageNav";
+  pageNav.innerHTML = "<ul>" + navContent + "</ul>";
+
+  document.querySelector(".docMainWrapper").appendChild(pageNav);
+
+  var elements = document.querySelectorAll(
+    ".sideNavVisible .docsNavContainer, .pageNav"
+  );
+  Stickyfill.add(elements);
+})();