Fix overlap between .main and .doc-nav with scrollbars

3 files changed, 30 insertions, 21 deletions

diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js
index 05e8ab35..36343c27 100644
--- a/content/assets/javascripts/docs.js
+++ b/content/assets/javascripts/docs.js
@@ -43,21 +43,26 @@ function toggleNavigation() {
 
           sidebar.appendChild(menu);
 
-          var sidebarHeight = sidebar.querySelector('ul').getBoundingClientRect().height + 55;
+          var sidebarContent = sidebar.querySelector('ul');
+          var sidebarContentHeight = 0;
 
           // When we scroll down to the bottom, we don't want the footer covering
           // the TOC list (sticky behavior)
           document.addEventListener('scroll', function() {
+            // Wait a cycle for the dimensions to kick in
+            if(!sidebarContentHeight) {
+              sidebarContentHeight = sidebarContent.getBoundingClientRect().height + 55;
+            }
+
             var isTouchingBottom = false;
             if (window.innerWidth >= NAV_INLINE_BREAKPOINT) {
-              isTouchingBottom  = window.scrollY + sidebarHeight >= main.offsetHeight;
+              isTouchingBottom  = window.scrollY + sidebarContentHeight >= main.offsetHeight;
             }
 
-            sidebar.classList.toggle('doc-nav-bottom-touching', isTouchingBottom)
             if (isTouchingBottom) {
-              sidebar.style.top = (main.offsetHeight - sidebarHeight) + 'px';
+              sidebarContent.style.top = (main.offsetHeight - (window.scrollY + sidebarContentHeight)) + 'px';
             } else {
-              sidebar.style.top = '';
+              sidebarContent.style.top = '';
             }
           }, { passive : true });
         }
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index cf0e206f..e19cf87d 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 23
+version: 24
 ---
 
 @import "variables";
@@ -172,6 +172,12 @@ h6 {
     padding: 20px 10px;
   }
 
+  &:not(.has-toc) {
+    > .doc-nav {
+      display: none;
+    }
+  }
+
   a {
     text-decoration: none;
   }
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index e149d737..421c29ce 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -1,5 +1,5 @@
 ---
-version: 3
+version: 4
 ---
 
 @import "variables";
@@ -15,6 +15,7 @@ version: 3
   }
 
   > ul {
+    position: relative;
     background: $body-background-color;
     padding: 20px;
     margin-top: 60px;
@@ -69,16 +70,16 @@ version: 3
     height: 100vh;
   }
 
-  .doc-nav-bottom-touching {
-    position: absolute;
-  }
-
   .doc-nav ul ul {
     padding-left: 25px;
   }
 }
 
 @media(min-width:1100px) and (max-width:1600px) {
+  $doc-nav-desired-width: 30vw;
+  // Get around the scroll bar
+  $doc-nav-width: calc(#{$doc-nav-desired-width} - 20px);
+
   .main.class.has-toc {
     width: 70vw;
     max-width: 70vw;
@@ -86,26 +87,23 @@ version: 3
   }
 
   .doc-nav {
-    width: 30vw;
-    max-width: 30vw;
-  }
-  .doc-nav-bottom-touching {
-    right: -30vw;
+    width: $doc-nav-width;
   }
 }
 
 // wide enough to show quick nav and toc
 @media(min-width:1601px) {
+  $doc-nav-desired-width: 25vw;
+  // Get around the scroll bar
+  $doc-nav-width: calc(#{$doc-nav-desired-width} - 20px);
+
   .main.class.has-toc {
     width: 50vw;
     max-width: 50vw;
-    margin-left: 25vw;
+    margin-left: $doc-nav-desired-width;
   }
 
   .doc-nav {
-    width: 25vw;
-  }
-  .doc-nav-bottom-touching {
-    right: -25vw;
+    width: $doc-nav-width;
   }
 }