Redesign sidebar and subnav

twbs · Sep 16, 2020 · 88a8a68 · 88a8a68
1 parent 7d13cdb
commit 88a8a68
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
@@ -1,4 +1,11 @@
+.bd-sidebar {
+  @include media-breakpoint-down(md) {
+    margin: 0 -1.5rem 1rem;
+  }
+}
+
 .bd-links {
+  overflow: auto;
   font-weight: 600;
 
   @include media-breakpoint-up(md) {
@@ -14,6 +21,14 @@
     overflow-y: auto;
   }
 
+  > ul {
+    @include media-breakpoint-down(md) {
+      padding: 1.5rem;
+      background-color: $gray-100;
+      border-bottom: 1px solid $gray-200;
+    }
+  }
+
   a {
     padding: .1875rem .5rem;
     margin-top: .125rem;

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
@@ -9,20 +9,20 @@
     {{ partial "docs-navbar" . }}
     {{ partial "docs-subnav" . }}
 
-    <div class="container-xxl my-4 bd-layout">
+    <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 pt-md-3 pl-lg-4">
-          <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 }}/tree/main/site/content/{{ .Page.File.Path }}" 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>
-          </div>
-          <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
-          {{ partial "ads" . }}
+    <main class="bd-main order-1">
+      <div class="bd-intro pt-3 pl-lg-4">
+        <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 }}/tree/main/site/content/{{ .Page.File.Path }}" 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>
         </div>
+        <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
+        {{ partial "ads" . }}
+      </div>
 
       {{ if (eq .Page.Params.toc true) }}
         <div class="bd-toc mt-4 mb-5 my-md-0 pl-xl-3 mb-lg-5 text-muted">

diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
@@ -7,7 +7,7 @@
     {{ partial "docs-versions" . }}
 
     <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3 order-3 ml-auto" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
-     {{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
+     {{ partial "icons/list.svg" (dict "class" "bi" "width" "" "height" "2rem") }}
    </button>
   </div>
 </nav>
diff --git a/site/layouts/partials/icons/list.svg b/site/layouts/partials/icons/list.svg