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

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