sticky/overflow scrolling sidebar interaction

data/sidebars/tutorials.yml

@@ -1,4 +1,4 @@
-- group: Tutorials
+- group: Data Science
   items:
     - title: Jupyter Notebooks
       link: /tutorials/jupyter/

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;
 }
 

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 {

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 {