✨ ENH: Left sidebar drawer animation (#298)

executablebooks · Mar 1, 2021 · 76fe7e7 · 76fe7e7
1 parent c9fae28
commit 76fe7e7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 52 deletions.
diff --git a/...heme.37f24b989f4638ff9c27c22dc7559d4f.css → ...heme.c441f2ba0852f4cabcb80105e3a46ae6.css b/...heme.37f24b989f4638ff9c27c22dc7559d4f.css → ...heme.c441f2ba0852f4cabcb80105e3a46ae6.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-search-bs.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
-stylesheet = sphinx-book-theme.37f24b989f4638ff9c27c22dc7559d4f.css
+stylesheet = sphinx-book-theme.c441f2ba0852f4cabcb80105e3a46ae6.css
 
 [options]
 single_page = False

diff --git a/src/scss/_leftbar.scss b/src/scss/_leftbar.scss
@@ -2,10 +2,37 @@
 * Left Nav Bar *
 *********************************************/
 .bd-sidebar  {
+    height: 100vh !important;
+    width: $leftbar-width;
+    flex: auto;
     top: 0px !important;
+    margin-left:0;
     overflow-y: auto;
-    height: 100vh !important;
     background: white;
+    transition: margin-left .2s ease 0s, opacity .2s ease 0s, visibility .2s ease 0s;
+    z-index: 2000 !important;
+
+    &.collapse {
+        visibility: hidden;
+        margin-left: -$leftbar-width;
+        opacity: 0;
+        display: block;
+        &.show {
+            visibility: visible;
+            margin-left: 0;
+            opacity: 1;
+        }
+    }
+    @media (max-width: $breakpoint-md) {
+        position: fixed;
+        margin-top: $topbar-height;
+        border-right: 1px solid rgba(0,0,0,.1);
+
+        // If we're only a single page, sidebar should hide at narrow widths.
+        &.single-page {
+            display: none;
+        }
+    }
 
     // Sidebar link color
     nav ul.nav {
@@ -59,13 +86,6 @@
         margin-bottom: 3em;
     }
 
-    &.collapsing {
-        border: none;
-        overflow: hidden;
-        position: relative;
-        padding-top: 0;
-    }
-
     // Single page
     &.single-page {
         border-right: 0;
@@ -92,48 +112,10 @@
     font-size: 1em;
 }
 
-.site-navigation, .site-navigation.collapsing {
-    transition: flex .2s ease 0s, height .35s ease, opacity 0.2s ease;
-}
-
 #site-navigation {
-    @media (max-width: $breakpoint-md) {
-        position: fixed;
-        margin-top: $topbar-height;
-        z-index: 2000;
-        background: white;
-    }
-}
-
-@media (max-width: $breakpoint-md) {
-
-    .bd-sidebar {
-        height: 60vh !important;
-        border-bottom: 3px solid #c3c3c3;
-
-        &.collapsing {
-            height: 0px !important;
-        }
-
-        // If we're only a single page, sidebar should hide at narrow widths.
-        &.single-page {
-            display: none;
-        }
-    }
-}
-
-@media (min-width: $breakpoint-md) {
-    .bd-sidebar {
-        z-index: 2000 !important;
-    }
 
-    .site-navigation.collapsing {
-        flex: 0 0 0px;
-        padding: 0;
-    }
 }
 
-
 div.navbar-brand-box {
     @media (min-width: $breakpoint-md) {
         padding-top: 2em;

diff --git a/src/scss/_topbar.scss b/src/scss/_topbar.scss
@@ -46,9 +46,18 @@
 }
 
 .bd-topbar-whitespace {
-    padding-right: none;
+    width: $leftbar-width;
+    flex: auto;
+    transition: flex 0.2s ease 0s;
     @media (max-width: 768px) {
-        display: none;
+        border-bottom: 1px solid transparent;
+        &.show, &.collapsing, body.scrolled & {
+            border-color: rgba(0, 0, 0, 0.1);
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            display: block;
+        }
     }
 }
 
@@ -143,11 +152,10 @@ button.topbarbtn img {
 @media (max-width: $breakpoint-md) {
     #navbar-toggler {
         i.fa-arrow-up {
-            display: inherit;
+            display: none;
         }
 
         i.fa-arrow-left {
-            display: none;
         }
     }
 }

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -11,6 +11,7 @@ $breakpoint-sm: 576px;
 $non-content-grey: #5a5a5a;
 
 $topbar-height: 3em;
+$leftbar-width: 275px;
 
 // Overrides for pydata sphinx theme. Will take effect when the next version is released
 :root {