From f6dbc5035b10bcfe89af7a57fb567dcc0490bb17 Mon Sep 17 00:00:00 2001
From: Mike McBride <mike@mikemcbride.dev>
Date: Mon, 11 Dec 2023 16:35:01 -0600
Subject: [PATCH] Add mobile nav toggle (#1051)

* add css toggle for mobile nav
* hide toggles on non mobile
* default to not checked
---
 assets/style.scss             | 48 ++++++++++++++++++++++++++++++++---
 layouts/partials/sidebar.html | 10 ++++++++
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index 0e269684..b3437c61 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -195,9 +195,51 @@ body {
 }
 
 .sidebar {
-  @media screen and (max-width: $mobile-width) {
-    margin-bottom: 60px;
-  }
+    @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;
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index f93a3515..67f37a7b 100644
--- a/layouts/partials/sidebar.html
+++ b/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 }}