Redesign docs layout

- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile

site/layouts/_default/docs.html

@@ -1,16 +1,16 @@
 {{ define "main" }}
-  {{ partial "docs-subnav" . }}
-
   <div class="container-xxl my-md-4 bd-layout">
     <aside class="bd-sidebar">
       {{ partial "docs-sidebar" . }}
     </aside>
 
     <main class="bd-main order-1">
-      <div class="bd-intro ps-lg-4">
+      <div class="bd-intro pt-2 ps-lg-2">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
-          <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+          <a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+            View on GitHub
+          </a>
+          <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
         </div>
         <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
         {{ partial "ads" . }}
@@ -18,12 +18,19 @@
 
       {{ 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">
-          <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
-          {{ .TableOfContents }}
+          <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>
+          </button>
+          <strong class="d-none d-md-block h6 my-2">On this page</strong>
+          <hr class="d-none d-md-block my-2">
+          <div class="collapse bd-toc-collapse" id="tocContents">
+            {{ .TableOfContents }}
+          </div>
         </div>
       {{ end }}
 
-      <div class="bd-content ps-lg-4">
+      <div class="bd-content ps-lg-2">
         {{ if .Page.Params.sections }}
           <div class="row g-3">
             {{ range .Page.Params.sections }}