v5: Adjust docs sidebar and navbar (#31119)

* Hide the docs nav on mobile, redesign it for two columns on narrow devices

* Tweak spacing on ToC

* Redesign sidebar and subnav

* Revamp subnav mobile layout so everything's on one line

* Tighten up masthead a little

* Switch the icon for the subnav and do a little icon toggling

* Fix mobile overflow since we changed guters stuff

* Add the widths

* make the subnav icon purple

4 files changed, 48 insertions, 18 deletions

diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 770815a5aa..a8ea52c869 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -2,10 +2,6 @@
   padding: 3rem 0;
   background: linear-gradient(165deg, lighten($bd-purple-light, 16%) 50%, $white 50%);
 
-  @include media-breakpoint-up(sm) {
-    padding: 5rem 0;
-  }
-
   h1 {
     @include font-size(4rem);
     line-height: 1;
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 1ba779f937..954304c3fb 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,22 +1,21 @@
 .bd-navbar {
-  padding: .625rem 0;
+  padding: .75rem 0;
   background-color: $bd-purple-bright;
 
-  @include media-breakpoint-down(lg) {
-    .navbar-nav-scroll {
-      width: 100%;
+  .navbar-toggler {
+    padding: 0;
+    border: 0;
 
-      .navbar-nav {
-        margin: -.5rem 0;
-        overflow-x: auto;
-        white-space: nowrap;
-        -webkit-overflow-scrolling: touch;
-      }
+    .bi {
+      width: 2rem;
+      fill: currentColor;
     }
   }
 
   .navbar-nav {
     .nav-link {
+      padding-right: $spacer / 4;
+      padding-left: $spacer / 4;
       color: rgba($white, .85);
 
       &:hover,
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 8f7db2e575..0575a465e5 100644
--- 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 -.75rem 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 .75rem;
+      background-color: $gray-100;
+      border-bottom: 1px solid $gray-200;
+    }
+  }
+
   a {
     padding: .1875rem .5rem;
     margin-top: .125rem;
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index c65b665db3..566bc17fdc 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -25,12 +25,32 @@
 }
 
 .bd-search {
-  @include media-breakpoint-down(md) {
-    width: 100%;
-  }
-
   .form-control:focus {
     border-color: $bd-purple-bright;
     box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
   }
 }
+
+.bd-sidebar-toggle {
+  color: $text-muted;
+
+  &:hover,
+  &:focus {
+    color: $bd-purple-bright;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+
+  .bi {
+    fill: currentColor;
+  }
+
+  .bi-collapse { display: none; }
+
+  &:not(.collapsed) {
+    .bi-expand { display: none; }
+    .bi-collapse { display: inline-block; }
+  }
+}