Redesign docs to use offcanvas for sidebar

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