more

Author: mdo

site/src/components/header/Navigation.astro

@@ -46,7 +46,7 @@ const { addedIn, layout, title } = Astro.props
       <BootstrapWhiteFillIcon class="d-block my-1" height={32} width={40} />
     </a>
 
-    {/* Search and main nav toggle */}
+    {/* Search and nav toggles */}
     <div class="d-flex gap-3">
       <div class="bd-search" id="docsearch" data-bd-docs-version={getConfig().docs_version}></div>
 

site/src/layouts/DocsLayout.astro

@@ -112,30 +112,35 @@ if (currentPageIndex < allPages.length - 1) {
         </div>
       </div>
 
-      <div class="vstack bd-toc mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-3">
-        <div class="overflow-y-auto">
-        {
-          frontmatter.toc && headings && (
-            <button
-              class="btn-sm btn-subtle mb-2 bd-toc-toggle lg:d-none"
-              type="button"
-              data-bs-toggle="collapse"
-              data-bs-target="#tocContents"
-              aria-expanded="false"
-              aria-controls="tocContents"
-            >
-              On this page
-              <svg class="bi lg:d-none ms-2" aria-hidden="true">
-                <use href="#chevron-expand" />
-              </svg>
-            </button>
-            <div class="collapse bd-toc-collapse" id="tocContents">
-              <nav id="TableOfContents" aria-labelledby="docs-tocs">
-                <TableOfContents headings={headings} />
-              </nav>
-            </div>
-          )
-        }
+      <div class="lg:d-none d-flex justify-content-center bd-toc-toggle">
+        <button
+          class="btn-solid theme-secondary rounded-pill px-5"
+          type="button"
+          data-bs-toggle="offcanvas"
+          data-bs-target="#bdTocSidebar"
+          aria-controls="bdTocSidebar"
+        >
+          <svg class="bi" aria-hidden="true"><use href="#list"></use></svg>
+          On this page…
+        </button>
+      </div>
+
+      <div class="bd-toc mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1">
+        <div class="lg:offcanvas offcanvas-bottom" tabindex="-1" id="bdTocSidebar" aria-labelledby="bdTocOffcanvasLabel">
+          <div class="offcanvas-header border-bottom">
+            <h5 class="offcanvas-title" id="bdTocOffcanvasLabel">On this page</h5>
+            <CloseButton dismiss="offcanvas" target="#bdTocSidebar" />
+          </div>
+
+          <div class="offcanvas-body">
+            {
+              frontmatter.toc && headings && (
+                <nav id="TableOfContents" aria-label="Table of contents">
+                  <TableOfContents headings={headings} />
+                </nav>
+              )
+            }
+          </div>
         </div>
         <Ads />
       </div>

site/src/scss/_toc.scss

@@ -1,5 +1,4 @@
 @use "../../../scss/layout/breakpoints" as *;
-@use "../../../scss/mixins/border-radius" as *;
 
 @layer custom {
   .bd-toc {
@@ -11,8 +10,19 @@
       top: var(--bd-navbar-offset);
       right: 0;
       z-index: 2;
+      display: flex;
+      flex-direction: column;
       height: calc(100vh - 6em);
-      // overflow-y: auto;
+      padding-inline-end: .25rem;
+      margin-inline-end: -.25rem;
+      overflow-y: auto;
+    }
+
+    @include media-breakpoint-down(lg) {
+      .lg\:offcanvas {
+        border-inline-start-color: var(--bs-border-color);
+        box-shadow: var(--bs-box-shadow-lg);
+      }
     }
 
     .nav {
@@ -44,49 +54,27 @@
     }
   }
 
-
-  .bd-toc-toggle {
-    display: flex;
-    align-items: center;
-
-    @include media-breakpoint-down(md) {
-      justify-content: space-between;
-      width: 100%;
+  // stylelint-disable-next-line selector-id-pattern, selector-max-id
+  #bdTocSidebar {
+    @include media-breakpoint-up(lg) {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
     }
 
     @include media-breakpoint-down(lg) {
-      color: var(--bs-color-body);
-      border: 1px solid var(--bs-border-color);
-      @include border-radius(var(--bs-border-radius));
-
-      &:hover,
-      &:focus,
-      &:active,
-      &[aria-expanded="true"] {
-        color: var(--bd-violet);
-        background-color: var(--bs-bg-body);
-        border-color: var(--bd-violet);
-      }
-
-      &:focus,
-      &[aria-expanded="true"] {
-        box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
-      }
+      height: 80dvh;
     }
   }
 
-  .bd-toc-collapse {
-    @include media-breakpoint-down(lg) {
-      nav {
-        padding: 1.25rem 1.25rem 1.25rem 1rem;
-        background-color: var(--bs-bg-subtle);
-        border: 1px solid var(--bs-border-color);
-        @include border-radius(var(--bs-border-radius));
-      }
-    }
-
-    @include media-breakpoint-up(lg) {
-      display: block !important; // stylelint-disable-line declaration-no-important
-    }
+  .bd-toc-toggle {
+    position: fixed;
+    right: 0;
+    bottom: 2rem;
+    left: 0;
+    z-index: 1030;
+    margin-inline: auto;
+    font-size: var(--font-size-sm);
+    box-shadow: var(--bs-box-shadow-lg);
   }
 }