add css toggle for mobile nav

assets/style.scss

@@ -195,9 +195,44 @@ body {
 }
 
 .sidebar {
-  @media screen and (max-width: $mobile-width) {
-    margin-bottom: 60px;
-  }
+    @media screen and (max-width: $mobile-width) {
+        margin-bottom: 60px;
+
+        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;
+        }
+    }
+
+    @media screen and (min-width: $mobile-width) {
+        .mobile-nav-wrapper {
+            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" checked>
+<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 }}