fix(site): make navbar visible on mobile (#3216)

Installation guides:

bootstrap: https://getbootstrap.com/docs/5.2/getting-started/introduction/

component: https://getbootstrap.com/docs/5.2/components/navbar/

Updating bootstrap and adding the js dependency has greatly increased the site size. Cold visit went from ~20kb to ~70kb. Something to bear in mind with these additions.

Author: isaaccloos

_includes/footer.html

@@ -17,3 +17,6 @@
     </div>
 </footer>
 <script src="{{ "/js/rustdoc.js" | absolute_url }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
+    integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
+    crossorigin="anonymous"></script>

_includes/header.html

@@ -1,10 +1,11 @@
 <header class="navbar navbar-expand-lg navbar-hyper" role="navigation">
   <nav class="container">
-    <div class="collapse navbar-collapse">
-      <ul class="nav navbar-nav">
-        <li class="nav-item">
-          <a class="navbar-brand" href="/">hyper.rs</a>
-        </li>
+    <a class="navbar-brand" href="/">hyper.rs</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hyperNavbar">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="hyperNavbar">
+      <ul class="navbar-nav">
         <li class="nav-item"><a class="nav-link" href="/guides/1">1.0 Guides</a></li>
         <li class="nav-item"><a class="nav-link" href="/guides/0.14">0.14 Guides</a></li>
         <li class="nav-item"><a class="nav-link" href="/contrib">Contrib</a></li>

css/main.scss

@@ -77,6 +77,12 @@ pre code {
     text-transform: lowercase;
 }
 
+@media (min-width: 992px) {
+    #hyper .nav-link {
+        line-height: 3rem;
+    }
+}
+
 #hyper .navbar a:hover, #hyper .navbar a:focus {
     background: none;
     border-color: $primary-highlight-color;