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/assets/js/application.js

@@ -15,6 +15,21 @@
 (function () {
   'use strict'
 
+  // Scroll the active sidebar link into view
+  var sidenav = document.querySelector('.bd-links')
+  if (sidenav) {
+    var sidenavHeight = sidenav.clientHeight
+    var sidenavActiveLink = document.querySelector('#bd-docs-nav .active')
+    var sidenavActiveLinkTop = sidenavActiveLink.offsetTop
+    var sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
+    var viewportTop = sidenavActiveLinkTop
+    var viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
+
+    if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
+      sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
+    }
+  }
+
   // Tooltip and popover demos
   document.querySelectorAll('.tooltip-demo')
     .forEach(function (tooltip) {
@@ -119,7 +134,8 @@
 
   // Insert copy to clipboard button before .highlight
   var btnTitle = 'Copy to clipboard'
-  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" ><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
+
   document.querySelectorAll('div.highlight')
     .forEach(function (element) {
       element.insertAdjacentHTML('beforebegin', btnHtml)