UI Enhancements: scroll, component naming, and more (#582)

- Fixed the sidebar scroll - with this fix, you'll be able to scroll to
the end of the left sidebar at any given screen height.
- Renamed content-navigation component and CSS class names for better
consistency.
- Changed the footer style by including it as part of the main content
area. This change is required to have the scroll fix mentioned at point
no. 1.
- Reduced the hero height by a small margin, in order to have more
sidebar scroll room on smaller devices such as 13 inch laptop and all.
- Used higher contrast color on search modal's bg and scrollbar thumb to
have better color consistency.
- Made scrollbar thumbs visible by default.
- Set sidebar scroll position to match the active doc item.
- Added custom scrollbars for code blocks.

source/_static/js/main.js

@@ -1,5 +1,6 @@
 window.addEventListener("DOMContentLoaded", (event) => {
   const tocMenuEl = document.querySelector("#table-of-contents > ul.simple");
+  const root = document.documentElement;
   var readModeLs = localStorage.getItem("read-mode");
 
   // --------------------------------------------------
@@ -12,6 +13,42 @@ window.addEventListener("DOMContentLoaded", (event) => {
     }
   })();
 
+  // --------------------------------------------------
+  // Dynamic sidebar scroll on read-mode.
+	// This'll allow the sidebar to display all content,
+	// without scrolling the body. 
+  // --------------------------------------------------
+  const sidebarEl = document.querySelector(".sidebar");
+  const headerEl = document.querySelector(".header");
+  const activeDocEl = document.querySelector(".docs a.current");
+
+  function setSidebarHeight() {
+    if(!root.classList.contains("read-mode")) {
+      var headerViewHeight = headerEl.clientHeight - root.scrollTop;
+      var sidebarHeight = headerViewHeight > 0 ? `calc(100vh - ${headerViewHeight}px)` : "100vh";
+
+      sidebarEl.style.setProperty("height", sidebarHeight);
+    }
+    else {
+      sidebarEl.style.removeProperty("height");
+    }
+  }
+  
+  setTimeout(() => {
+    setSidebarHeight();
+    
+    // Scroll sidebar to active doc items
+    if(activeDocEl && activeDocEl.offsetTop > 400) {
+      sidebarEl.scrollTop = activeDocEl.offsetTop - 40;
+    }
+    
+    // Make the sidebar is scrollable.
+    sidebarEl.classList.remove("inactive");
+  }, 100);
+
+  document.addEventListener("scroll", (e) => {
+    setSidebarHeight();
+  });
 
   // --------------------------------------------------
   // Read mode
@@ -34,6 +71,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
     readModeEl.addEventListener("click", (event) => {
       document.documentElement.classList.toggle("read-mode");
 
+			// Re-calculate sidebar height
+      setSidebarHeight();
+
       if (document.documentElement.classList.contains("read-mode")) {
         localStorage.setItem("read-mode", "true");
       } else {
@@ -55,6 +95,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
           document.documentElement.classList.remove("read-mode");
         }
       }
+
+			// Re-calculate sidebar height
+			setSidebarHeight();
     }
 
     var resizeTimer;
@@ -149,10 +192,10 @@ window.addEventListener("DOMContentLoaded", (event) => {
         var target = nav.getAttribute("data-content-nav");
 
         document
-          .querySelector(".content__nav__inner a.active")
+          .querySelector(".platform-nav__inner a.active")
           .classList.remove("active");
         document
-          .querySelector(".content__nav__dropdown nav.active")
+          .querySelector(".platform-nav__dropdown nav.active")
           .classList.remove("active");
         document.getElementById(target).classList.add("active");
         nav.classList.add("active");
@@ -329,4 +372,16 @@ window.addEventListener("DOMContentLoaded", (event) => {
       });
     }
   })();
+
+  // --------------------------------------------------
+  // Custom scrollbars for `pre` code blocks
+  // --------------------------------------------------
+  (function () {
+    const preEls = document.querySelectorAll(".highlight pre");
+    if(preEls.length > 0) {
+      preEls.forEach((item) => {
+        item.classList.add("scrollbar");
+      });
+    }
+  })();
 });