🐛 FIX: Fixing sidebar scroll (#311)

executablebooks · Apr 22, 2021 · d348580 · d348580
1 parent 8a03bb7
commit d348580
Show file tree

Hide file tree

Showing 7 changed files with 325 additions and 33 deletions.
diff --git a/docs/_static/logo.png b/docs/_static/logo.png
diff --git a/docs/reference/chapterpage2.md b/docs/reference/chapterpage2.md
@@ -1,3 +1,283 @@
-# A second chapter page
+# Lots of second level headers
 
-Some demo text
+This is a page with a ton of second-level headers to see how the right TOC behaves.
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
+
+## Test header 1
+
+Test text
+
+### Test header 2
+
+Test text 2
diff --git a/...heme.d1eca0c74be0ba334ed3837a61090a22.css → ...heme.acff12b8f9c144ce68a297486a2fa670.css b/...heme.d1eca0c74be0ba334ed3837a61090a22.css → ...heme.acff12b8f9c144ce68a297486a2fa670.css
diff --git a/sphinx_book_theme/theme.conf b/sphinx_book_theme/theme.conf
@@ -3,7 +3,7 @@
 inherit = pydata_sphinx_theme
 pygments_style = tango
 sidebars = sidebar-logo.html, search-field.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
-stylesheet = sphinx-book-theme.d1eca0c74be0ba334ed3837a61090a22.css
+stylesheet = sphinx-book-theme.acff12b8f9c144ce68a297486a2fa670.css
 
 [options]
 single_page = False

diff --git a/src/scss/_leftbar.scss b/src/scss/_leftbar.scss
@@ -12,6 +12,7 @@
     transition: margin-left .2s ease 0s, opacity .2s ease 0s, visibility .2s ease 0s;
     z-index: 2000 !important;
 
+    @include scrollbar-style();
     @media (max-width: $breakpoint-md) {
         position: fixed;
         margin-top: $topbar-height;
@@ -33,34 +34,6 @@
         }
     }
 
-    scrollbar-width: thin;
-    &::-webkit-scrollbar {
-        width: 5px;
-    }
-
-    &::-webkit-scrollbar {
-        background: #f1f1f1;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #c1c1c1;
-    }
-
-    // Hide the scrollbar until hover on wide screens
-    @media (min-width: $breakpoint-lg) {
-        &:not(:hover) {
-            -ms-overflow-style: none;
-
-            &::-webkit-scrollbar {
-              background: #FFFFFF;
-            }
-
-            &::-webkit-scrollbar-thumb {
-              background: #FFFFFF;
-            }
-        }
-    }
-
     h1.site-logo {
         margin: .5em 0 0 0;
         font-size: 1.1em;
@@ -109,6 +82,9 @@ nav.bd-links {
     p.caption, .toctree-l1 a {
         padding-left: 0em;
     }
+    // Overriding PyData Theme Defaults so the navigation is always visible
+    overflow-y: visible;
+    max-height: none;
 }
 
 // Navbar and topbar sidebar padding should max at 300px

diff --git a/src/scss/_righttoc.scss b/src/scss/_righttoc.scss
@@ -4,7 +4,6 @@
 
 .bd-toc {
     padding: 0px !important;
-    overflow-y: visible;
     right: -1em;
     z-index: 999;
     height: auto;
@@ -21,6 +20,7 @@
         transition: opacity 0.2s ease, max-height .7s ease;
         overflow-y: hidden;
         background: white;
+        @include scrollbar-style();
 
         // TOC link color
         a:hover, li.active > a.active {
@@ -44,6 +44,7 @@
         nav {
             max-height: 100vh;
             opacity: 1;
+            overflow-y: auto;
         }
 
         // Hide the arrow when we display the toc