Merge pull request #35 from UR-dandyhacks/dev

Make the hamburger icon visible on the navigation menu

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>

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
 

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;
 }