From 01f7c2b62af8da351021a721d4e5bd57704404e9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 10 Nov 2018 01:29:10 +0100
Subject: [PATCH] sticky/overflow scrolling sidebar interaction

---
 data/sidebars/tutorials.yml              |  2 +-
 src/components/HeaderSection.module.scss |  2 +-
 src/components/Sidebar.module.scss       | 27 +++++++++++++++++++++++-
 src/templates/Doc.module.scss            |  2 --
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/data/sidebars/tutorials.yml b/data/sidebars/tutorials.yml
index 175d2821..49e20f7b 100644
--- a/data/sidebars/tutorials.yml
+++ b/data/sidebars/tutorials.yml
@@ -1,4 +1,4 @@
-- group: Tutorials
+- group: Data Science
   items:
     - title: Jupyter Notebooks
       link: /tutorials/jupyter/
diff --git a/src/components/HeaderSection.module.scss b/src/components/HeaderSection.module.scss
index 7868f628..57c7ff76 100644
--- a/src/components/HeaderSection.module.scss
+++ b/src/components/HeaderSection.module.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .headerSection {
-    padding: $spacer 0;
+    padding: $spacer / $line-height 0;
     border-bottom: .1rem solid $brand-grey-lighter;
 }
 
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 04cf953f..5b58a0f6 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -1,7 +1,32 @@
 @import 'variables';
 
 .sidebar {
-    padding-top: $spacer / 2;
+    padding-bottom: $spacer;
+    padding-right: $spacer / 2;
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar,
+    &::-moz-scrollbar {
+        display: none;
+    }
+
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $brand-grey-lighter;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: darken($brand-white, 3%);
+    }
 }
 
 .groupTitle {
diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss
index 3f281479..1ad7b9d7 100644
--- a/src/templates/Doc.module.scss
+++ b/src/templates/Doc.module.scss
@@ -8,9 +8,7 @@
 
 .sidebar {
     flex: 0 0 27%;
-    padding-right: $spacer;
     margin-top: $spacer / 2;
-    position: sticky;
     top: $spacer;
 
     + .main {