From 877836953a5808f9ce150a65dbbbb3015b69d8cd Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Wed, 25 Jun 2025 21:52:48 +0100
Subject: [PATCH] Implement burger menu

Rather than attempt to recreate the exact burger menu from the old
version of the site, since it requires a number of dependencies, I've
added a burger menu with some inline javascript to handle the toggle
states.

I used Claude 4 to help generate the CSS here.
---
 _includes/header.html | 27 ++++++++++++++++++++
 assets/css/app.css    | 57 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)

diff --git a/_includes/header.html b/_includes/header.html
index d2a276c..55d5681 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -5,6 +5,14 @@
     </a>
   </div>
   <div>
+    <button class="header_burger-btn" aria-label="Toggle menu">
+      <svg class="header_burger-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+      <svg class="header_close-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+    </button>
     <ul class="header_menu-list">
       <li><a href="/#members">Members</a></li>
       <li><a href="/about">About</a></li>
@@ -12,4 +20,23 @@
       <li><a href="/#contact">Contact</a></li>
     </ul>
   </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const burgerBtn = document.querySelector('.header_burger-btn');
+      const menuList = document.querySelector('.header_menu-list');
+
+      burgerBtn.addEventListener('click', function() {
+        menuList.classList.toggle('active');
+        burgerBtn.classList.toggle('active');
+      });
+
+      const menuLinks = document.querySelectorAll('.header_menu-list a');
+      menuLinks.forEach(link => {
+        link.addEventListener('click', function() {
+          menuList.classList.remove('active');
+        });
+      });
+    });
+  </script>
 </header>
diff --git a/assets/css/app.css b/assets/css/app.css
index 1c687c1..29f88f3 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -126,6 +126,63 @@ section.content h2 {
   letter-spacing: 0.05em;
 }
 
+.header_burger-btn {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-xs);
+  color: var(--cotech-dark-grey);
+}
+
+.header_close-icon {
+  display: none;
+}
+
+@media screen and (width < 480px) {
+  .header {
+    position: relative;
+  }
+
+  .header_burger-btn {
+    display: block;
+  }
+
+  .header_menu-list {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--cotech-white);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-lg);
+    font-size: 1.5rem;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+
+  .header_menu-list.active {
+    transform: translateX(0);
+  }
+
+  .header_burger-btn.active .header_burger-icon {
+    display: none;
+  }
+
+  .header_burger-btn.active .header_close-icon {
+    display: block;
+  }
+
+  .header_burger-btn {
+    position: relative;
+    z-index: 1001;
+  }
+}
+
 .hero {
   width: 100%;
   padding: var(--space-lg) var(--space-sm);