From 84df8d3ccb2b5e40f8a5a90ecd71e0ab463483be Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sat, 20 Jan 2024 00:31:03 -0500
Subject: Navbar responsive design; Now using grid instead of flexbox

---
 src/components/Navbar.astro | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src/components/Navbar.astro')

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index c9deb28..03bc27c 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -2,6 +2,9 @@
 import "../styles/Navbar.css"
 ---
 <nav>
+    <button class="nav-toggle" aria-label="toggle navigation">
+        <span class='hamburger'></span>
+    </button>
     <ul class="nav-list">
         <li><a href="/" class="nav-link">Home</a></li>
         <li><a href="#" class="nav-link">Projects</a></li>
@@ -11,3 +14,10 @@ import "../styles/Navbar.css"
         <li><a href="#" class="nav-link">Contacts</a></li>
     </ul>
 </nav>
+
+<script>
+    document.querySelector('.nav-toggle').addEventListener('click', function() {
+        this.classList.toggle('active');
+        document.querySelector('.nav-list').classList.toggle('show');
+    });
+</script>
-- 
cgit v1.2.3