From f99e8a7ec4c56525ad6ca486d92fa1a6b381b7eb Mon Sep 17 00:00:00 2001
From: Zach <duong.nguyen@rochester.edu>
Date: Mon, 16 Oct 2023 21:17:34 -0400
Subject: [PATCH 1/2] Make hamburger icon visible on nav menu by changing the
 z-index

The user can now click on the icon to close the nav menu!
---
 index.html | 4 ++--
 styles.css | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index b5b5d04..bb533e2 100644
--- a/index.html
+++ b/index.html
@@ -12,9 +12,9 @@
   <nav class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform md:px-12 bg-deep-purple translate-y-0">
     <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
     <div>
-      <input class="absolute w-8 h-8 opacity-0 peer md:hidden" type="checkbox" />
+      <input class="absolute z-50 w-8 h-8 opacity-0 peer md:hidden" type="checkbox" />
       <div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 md:hidden"></div>
-      <img class="md:hidden" src="img/icons/hamburger.png" />
+      <img class="relative z-40 md:hidden" src="img/icons/hamburger.png" />
       <ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
         <li class="text-right"><a href="#about">About</a></li>
         <li class="text-right"><a href="#tracks">Tracks</a></li>
diff --git a/styles.css b/styles.css
index ae22b4a..0915fb3 100644
--- a/styles.css
+++ b/styles.css
@@ -675,6 +675,14 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 30;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
 .float-right {
   float: right;
 }

From 402802cb02c734ba795ece329cf7b0500b726f12 Mon Sep 17 00:00:00 2001
From: Zach <duong.nguyen@rochester.edu>
Date: Mon, 16 Oct 2023 21:18:35 -0400
Subject: [PATCH 2/2] Reduce 9 lines of JS :-)

I just realized that since the dark overlay has pointer-events:
auto, it already disables scrolling when visible, and there is no
need for overflow-x: hidden on the body.
---
 script.js | 25 ++++---------------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/script.js b/script.js
index 3d198d7..b2b6c16 100644
--- a/script.js
+++ b/script.js
@@ -4,16 +4,12 @@ document.addEventListener('DOMContentLoaded', () => {
     const navigationLinks = navBar.querySelectorAll('li');
     const hamburgerCheckbox = navBar.querySelector('.peer');
 
-    if (hamburgerCheckbox.checked) {
-        document.body.classList.add('overflow-hidden');
-    }
-
     // Hamburger navigation
 
     navigationLinks.forEach(navigationLink => {
-      navigationLink.addEventListener('click', () => {
-          closeNavigationMenu();
-      });
+        navigationLink.addEventListener('click', () => {
+            hamburgerCheckbox.checked = false;
+        });
     });
 
     // Navbar appears on scroll down and hides on scroll up
@@ -35,26 +31,13 @@ document.addEventListener('DOMContentLoaded', () => {
         navBar.classList.remove('-translate-y-full');
     }
 
-    // Disable scrolling when navigation menu is visible
-
-    hamburgerCheckbox.addEventListener('change', (e) => {
-        if (e.target.checked) {
-            document.body.classList.add('overflow-hidden');
-        }
-    });
-
     // Close navigation menu when the dark overlay is clicked on
 
     const darkOverlay = navBar.querySelector('.bg-black');
 
     darkOverlay.addEventListener('click', () => {
-        closeNavigationMenu();
-    });
-
-    function closeNavigationMenu() {
-        document.body.classList.remove('overflow-hidden');
         hamburgerCheckbox.checked = false;
-    }
+    });
 
     // particles.js