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

site/layouts/_default/docs.html

@@ -1,7 +1,16 @@
 {{ define "main" }}
-  <div class="container-xxl my-md-4 bd-layout">
+  <div class="container-xxl mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
-      {{ partial "docs-sidebar" . }}
+      <div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
+        <div class="offcanvas-header border-bottom">
+          <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
+        </div>
+
+        <div class="offcanvas-body">
+          {{ partial "docs-sidebar" . }}
+        </div>
+      </div>
     </aside>
 
     <main class="bd-main order-1">
@@ -17,7 +26,7 @@
       </div>
 
       {{ if (eq .Page.Params.toc true) }}
-        <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
+        <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
           <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
             On this page
             <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>

site/layouts/partials/docs-navbar.html

@@ -1,26 +1,28 @@
 <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
-  <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
-    <a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
+  <nav class="container-xxl flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+    {{- if eq .Layout "docs" }}
+      <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
+        {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
+        <span class="d-none fs-6 pe-1">Browse</span>
+      </button>
+    {{- else }}
+      <div class="d-lg-none" style="width: 2.25rem;"></div>
+    {{- end }}
+
+    <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
     </a>
 
-    <div class="d-flex d-md-none order-3">
-      {{- if eq .Layout "docs" }}
-        <button class="navbar-toggler p-2" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
-          {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
-          <span class="fs-6 pe-1">Browse</span>
-        </button>
-        <div class="vr my-1 mx-2 text-white"></div>
-      {{- end }}
+    <div class="d-flex d-lg-none order-3">
       <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="bi" width="24" height="24"><use xlink:href="#three-dots"></use></svg>
       </button>
     </div>
 
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
+    <div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
       <div class="offcanvas-header px-4 pb-0">
         <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
-        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
       </div>
 
       <div class="offcanvas-body p-4 pt-0 p-lg-0">

site/layouts/partials/docs-sidebar.html

@@ -1,8 +1,8 @@
-<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation">
+<nav class="bd-links w-100">
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-  <ul class="bd-links-nav list-unstyled mb-0 py-3 py-md-2 pe-lg-2">
+  <ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
   {{- range $group := .Site.Data.sidebar -}}
     {{- $link := $group.title -}}
     {{- $link_slug := $link | urlize -}}