Redesign docs to use offcanvas for sidebar

site/assets/js/application.js

@@ -16,10 +16,10 @@
   'use strict'
 
   // Scroll the active sidebar link into view
-  var sidenav = document.querySelector('.bd-links')
+  var sidenav = document.querySelector('.bd-sidebar')
   if (sidenav) {
     var sidenavHeight = sidenav.clientHeight
-    var sidenavActiveLink = document.querySelector('#bd-docs-nav .active')
+    var sidenavActiveLink = document.querySelector('.bd-links-nav .active')
     var sidenavActiveLinkTop = sidenavActiveLink.offsetTop
     var sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
     var viewportTop = sidenavActiveLinkTop

site/assets/scss/_content.scss

@@ -3,10 +3,8 @@
 //
 
 // Offset for the sticky header
-@include media-breakpoint-up(md) {
-  :root {
-    scroll-padding-top: 4rem;
-  }
+:root {
+  scroll-padding-top: 5rem;
 }
 
 .bd-content {

site/assets/scss/_layout.scss

@@ -1,15 +1,11 @@
 .bd-layout {
   --bs-gutter-x: #{$bd-gutter-x};
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: grid;
     grid-template-areas: "sidebar main";
-    grid-template-columns: 1fr 3fr;
-    gap: $grid-gutter-width;
-  }
-
-  @include media-breakpoint-up(lg) {
     grid-template-columns: 1fr 5fr;
+    gap: $grid-gutter-width;
   }
 }
 
@@ -20,6 +16,11 @@
 .bd-main {
   grid-area: main;
 
+  @include media-breakpoint-down(lg) {
+    max-width: 760px;
+    margin-inline: auto;
+  }
+
   @include media-breakpoint-up(md) {
     display: grid;
     grid-template-areas:

site/assets/scss/_navbar.scss

@@ -47,11 +47,11 @@
     vertical-align: -.125rem;
   }
 
-  .offcanvas {
+  .offcanvas-lg {
     background-color: var(--bd-violet);
     border-left: 0;
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
       box-shadow: $box-shadow-lg;
     }
   }

site/assets/scss/_search.scss

@@ -23,7 +23,11 @@
     position: absolute;
     top: .75rem;
     left: 50%;
-    width: 100%;
+    width: 200px;
+    margin-left: -100px;
+  }
+
+  @include media-breakpoint-up(xl) {
     width: 280px;
     margin-left: -140px;
   }

site/assets/scss/_sidebar.scss

@@ -1,13 +1,5 @@
 .bd-sidebar {
-  @include media-breakpoint-down(md) {
-    margin: 0 calc(var(--bs-gutter-x) * -.5) 1rem; // stylelint-disable-line function-disallowed-list
-  }
-}
-
-.bd-links {
-  overflow: auto;
-
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     position: sticky;
     top: 5rem;
     // Override collapse behaviors
@@ -22,14 +14,11 @@
 }
 
 .bd-links-nav {
-  @include media-breakpoint-down(md) {
-    padding: 1.5rem 1.25rem;
+  @include media-breakpoint-down(lg) {
     font-size: .875rem;
-    background-color: $gray-100;
-    border-bottom: 1px solid $gray-200;
   }
 
-  @include media-breakpoint-between(xs, md) {
+  @include media-breakpoint-between(xs, lg) {
     column-count: 2;
     column-gap: 1.5rem;
 
@@ -46,7 +35,7 @@
 .bd-links-link {
   padding: .1875rem .5rem;
   margin-top: .125rem;
-  margin-left: 1.125rem;
+  margin-left: 1rem;
   color: rgba($black, .65);
   text-decoration: if($link-decoration == none, null, none);