Fix sidebar scroll and menu z-index (#587)

source/_static/js/main.js

@@ -21,16 +21,26 @@ window.addEventListener("DOMContentLoaded", (event) => {
   const sidebarEl = document.querySelector(".sidebar");
   const headerEl = document.querySelector(".header");
   const activeDocEl = document.querySelector(".docs a.current");
+  const tocEl = document.querySelector(".content__toc");
 
-  function setSidebarHeight() {
-    if(!root.classList.contains("read-mode")) {
+  function setSidebarHeight() { //TODO: Clean this up
     var headerViewHeight = headerEl.clientHeight - root.scrollTop;
     var sidebarHeight = headerViewHeight > 0 ? `calc(100vh - ${headerViewHeight}px)` : "100vh";
+    var sidebarReadModeHeight = window.innerWidth > 991 ? sidebarHeight : "100vh";
       
+    if(!root.classList.contains("read-mode")) {
       sidebarEl.style.setProperty("height", sidebarHeight);
+      tocEl.style.setProperty("height", sidebarHeight);
     }
     else {
-      sidebarEl.style.removeProperty("height");
+      sidebarEl.style.setProperty("height", sidebarReadModeHeight);
+      
+      if(window.innerWidth > 991) {
+        tocEl.style.setProperty("height", sidebarReadModeHeight);
+      }
+      else {
+        tocEl.style.removeProperty("height");
+      }
     }
   }
   

source/_static/scss/includes/_aside.scss

@@ -12,7 +12,7 @@ div.sidebar {
     transition: opacity 400ms, transform 300ms;
     padding: var(--content-padding);
     overflow-y: auto;
-    height: calc(100vh - 6.0625rem); // 6.0625rem = header height
+    height: 100vh;
     z-index: $z-index-header - 2;
     margin: 0;
     border: none;

source/_static/scss/includes/_misc.scss

@@ -2,9 +2,15 @@
 // Custom scrollbar
 // ----------------------
 .scrollbar {
-  scrollbar-color: var(--scrollbar-bg) transparent;
   scrollbar-width: thin;
   
+  &:not(.scrollbar--hover) {
+    scrollbar-color: var(--scrollbar-bg) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-bg);
+    }
+  } 
 
   &:hover {
     scrollbar-color: var(--scrollbar-hover-bg) transparent;
@@ -24,7 +30,6 @@
   }
   
   &::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-bg);
     border-radius: 1rem;
     border: 3px solid transparent;
     background-clip: content-box;
@@ -35,6 +40,10 @@
   }
 }
 
+.scrollbar--hover {
+  scrollbar-color: transparent transparent;
+}
+
 
 // ----------------------
 // Buttons icons

source/_static/scss/includes/_nav.scss

@@ -371,26 +371,25 @@
 
 
 // ----------------------
-// Content nav
+// Platform nav
 // ----------------------
 .platform-nav {
 	background-color: var(--content-nav-bg);
 	font-size: $font-size-md;
-    z-index: 10;
     position: relative;
     box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15);
 
-    .container {
+    & > .container {
         white-space: nowrap;
         overflow-x: auto;
         display: flex;
         @include hide-scrollbars();
-    }
 
 		&:after {
 			background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%);
 		}
     }
+}
 
 :root {
     &:not(.dark-mode):not(.read-mode) {
@@ -472,7 +471,6 @@
 };
 
 .platform-nav__dropdown {
-    z-index: 1;
     background-color: var(--content-nav-sub-bg);
     font-size: $font-size-sm;
 	
@@ -511,7 +509,7 @@
     }
 }
 
-.platform-nav,
+.platform-nav > .container,
 .platform-nav__dropdown {
 	position: relative;
 
@@ -523,7 +521,7 @@
 		width: 3rem;
 		height: 100%;
 		z-index: 1;
-		height: 2.8125rem;
+		height: 100%;
 		pointer-events: none;
 	}
 }

source/_templates/platform-navigation.html

@@ -46,49 +46,4 @@
           </nav>
       </div>
     </div>
-
-    <!-- 
-    <div class="platform-nav__dropdown">
-        <div class="container">
-            <nav id="cn-kubernetes" class="{{ 'active' if doc_platform == 'kubernetes' }}">
-                <a href="">Upstream</a>
-                <a href="">Redhat Openshift</a>
-                <a href="">VMware Tanzu</a>
-                <a href="">SUSE Rancher</a>
-                <a href="">Amazon EKS</a>
-                <a href="">Azure Kubernetes Service</a>
-                <a href="">Google Kubernetes Engine</a>
-                <a href="">Others</a>
-            </nav>
-
-            <nav id="cn-docker" class="{{ 'active' if doc_platform == 'container' }}">
-                <a href="">docker-1</a>
-                <a href="">docker-2</a>
-                <a href="">docker-3</a>
-                <a href="">docker-4</a>
-            </nav>
-
-            <nav id="cn-linux" class="{{ 'active' if doc_platform == 'linux' }}">
-                <a href="">linux-1</a>
-                <a href="">linux-2</a>
-                <a href="">linux-3</a>
-                <a href="">linux-4</a>
-            </nav>
-
-            <nav id="cn-macos" class="{{ 'active' if doc_platform == 'macos' }}">
-                <a href="">macos-1</a>
-                <a href="">macos-2</a>
-                <a href="">macos-3</a>
-                <a href="">macos-4</a>
-            </nav>
-
-            <nav id="cn-windows" class="{{ 'active' if doc_platform == 'windows' }}">
-                <a href="">windows-1</a>
-                <a href="">windows-2</a>
-                <a href="">windows-3</a>
-                <a href="">windows-4</a>
-            </nav>
-        </div>
-    </div>
-    -->
 </div>

source/_templates/toc.html

@@ -1,4 +1,4 @@
-<div class="content__toc scrollbar">
+<div class="content__toc scrollbar scrollbar--hover">
     <button data-aside-toggle="doc" class="icon" type="button">
         {%- include "icons/menu.html" %}
         TOC Menu