Add mobile nav toggle (#1051)

* add css toggle for mobile nav
* hide toggles on non mobile
* default to not checked

assets/style.scss

@@ -197,7 +197,49 @@ body {
 .sidebar {
     @media screen and (max-width: $mobile-width) {
         margin-bottom: 60px;
+
+        // css menu toggle for mobile.
+        // when the checkbox is checked, the menu shows,
+        // othewise it's hidden.
+        // it's important for it all to be scoped inside this media query,
+        // that way on larger screens the menu will always show even if the checkbox is unchecked.
+        input[type="checkbox"] {
+            display: none;
         }
+        label {
+            font-size: 1.2rem;
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 2rem;
+        }
+        label i {
+            margin-right: .25rem;
+        }
+        input[type="checkbox"]:not(:checked) + label > .menu-open {
+            display: none;
+        }
+
+        input[type="checkbox"]:checked + label > .menu-close {
+            display: none;
+        }
+
+        & > ul {
+            display: none;
+        }
+
+        #mobile-nav-toggle:checked ~ ul {
+            display: block;
+        }
+    }
+
+    // on viewport sizes larger than mobile, always hide the mobile nav toggle.
+    @media screen and (min-width: $mobile-width) {
+        .mobile-nav-toggle,
+        .mobile-nav-toggle + label {
+            display: none;
+        }
+    }
+
 
   .brand {
     display: flex;

layouts/partials/sidebar.html

@@ -2,6 +2,16 @@
   <img class="link-logo" src="{{ relURL "brand.svg" }}" alt="Mastodon" />
 </a>
 
+<input id="mobile-nav-toggle" class="mobile-nav-toggle" type="checkbox">
+<label for="mobile-nav-toggle">
+    <span class="menu-open">
+        <i class="fa fa-times"></i> Close
+    </span>
+    <span class="menu-close">
+        <i class="fa fa-bars"></i> Menu
+    </span>
+</label>
+
 <ul>
   {{ $currentPage := . }}
   {{ range .Site.Menus.docs.ByWeight }}