From de47f656c754ed836dfc196f95fae0b37f82d5c5 Mon Sep 17 00:00:00 2001
From: Chad Tindel <chad@tindel.net>
Date: Wed, 17 May 2023 16:47:58 +0000
Subject: [PATCH] Added CSS and JS to switch the navbar to a hamburger menu on
 mobile devices

---
 assets/ananke/css/_styles.css         | 20 ++++++++++++++
 layouts/partials/site-navigation.html | 38 ++++++++++++++++++++++-----
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/assets/ananke/css/_styles.css b/assets/ananke/css/_styles.css
index 9db98a7..5cdf3c0 100644
--- a/assets/ananke/css/_styles.css
+++ b/assets/ananke/css/_styles.css
@@ -18,3 +18,23 @@
 .nested-links a{
   overflow-wrap: break-word;
 }
+
+.menu-btn {
+  display: none; 
+  color: white;
+  font-size: 2em;
+}
+.nav-links {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 600px) {
+  .nav-links {
+    display: none;
+    flex-direction: column;
+  }
+  .menu-btn {
+    display: block;
+  }
+}
diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html
index a1500a1..08bd721 100644
--- a/layouts/partials/site-navigation.html
+++ b/layouts/partials/site-navigation.html
@@ -10,15 +10,39 @@
     <div class="flex-l items-center">
       {{ partial "i18nlist.html" . }}
       {{ if .Site.Menus.main }}
-        <ul class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
-          {{ range .Site.Menus.main }}
-          <li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
-            <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
+        <nav>
+          <div class="menu-btn">
+            <div class="dib">☰ Menu</div>
+          </div>
+          <div class="nav-links">
+            {{ range .Site.Menus.main }}
+            <a class="link hover-white white-90 no-underline f5 f4-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }} " href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
               {{ .Name }}
             </a>
-          </li>
-          {{ end }}
-        </ul>
+            {{ end }}
+          </div>
+        </nav>
+
+        <script>
+          var navLinks = document.querySelector('.nav-links');
+          document.querySelector('.menu-btn').addEventListener('click', function() {
+            if (navLinks.style.display === 'none') {
+              navLinks.style.display = 'flex';
+            } else {
+              navLinks.style.display = 'none';
+            }
+          });
+       
+          // Adjust menu when window is resized
+          window.addEventListener('resize', function() {
+            if (window.innerWidth > 600) {
+              navLinks.style.display = 'flex';
+            } else {
+              navLinks.style.display = 'none';
+            }
+          });
+        </script>
+
       {{ end }}
       {{ partialCached "social-follow.html" . }}
     </div>