Make sidebar sticky and scroll independently of page content

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index 8d16a6d..411c332 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -130,7 +130,7 @@ return async (env, head, body, scripts) => {
       div.scrollbar-fix {
         div.container-fluid {
           div.row {
-            div.'col-md-2'.bg-gray-200 {
+            div.'col-sm-6'.'col-md-4'.'col-lg-3'.'col-xxl-2'.sidebar {
               div.'mt-1'.mb-4 {
                 div(style="width: 128px; height: 128px;") {
                   _out.push(avatar_maker)
@@ -246,7 +246,7 @@ return async (env, head, body, scripts) => {
               //}
             }
 
-            div.col-md-9 {
+            div.col-xl-8 {
               await body(_out)
 
               footer.page-footer.grid-gutter-background.py-5 {

diff --git a/_lib/page.jst b/_lib/page.jst
index d07619c..33d7bfc 100644 (file)
--- a/_lib/page.jst
+++ b/_lib/page.jst
@@ -50,7 +50,7 @@ return async (env, head, body, scripts) => {
 
       await head(_out) //title {'Hello, world!'}
     }
-    body {
+    body(style="overflow-x: hidden;") {
       await body(_out) //h1 {'Hello, world!'}
 
       // Optional JavaScript; choose one of the two!

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index fac6403..8030696 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -32,6 +32,15 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-right: .5 * $grid-gutter-width;
 }
 
+.sidebar {
+  position: sticky;
+  top: 0;
+  min-height: 100vh;
+  max-height: 100vh;
+  overflow-y: auto;
+  background-color: $gray-200;
+}
+
 // needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height
 // the svg is positioned within this to vertically centre on a capital letter

diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss
index 0cd8d18..83baccc 100644 (file)
--- a/css/bootstrap/_variables.scss
+++ b/css/bootstrap/_variables.scss
@@ -197,7 +197,8 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1200px,
+  xxl: 1500px // Nick
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -212,7 +213,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1140px,
+  xxl: 1420px // Nick
 ) !default;
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");