From 930efb9dd7f5ce4e1b9985f04a46adc9e1cf6552 Mon Sep 17 00:00:00 2001
From: Zach <duong.nguyen@rochester.edu>
Date: Sun, 15 Oct 2023 14:31:44 -0400
Subject: [PATCH] Smart navbar

---
 index.html |   4 +-
 script.js  |  39 ++++++++++++++---
 styles.css | 123 +++++++++++++++++------------------------------------
 3 files changed, 76 insertions(+), 90 deletions(-)
diff --git a/index.html b/index.html
index 8049ca2..7386757 100644
--- a/index.html
+++ b/index.html
@@ -9,12 +9,12 @@
 </head>
 
 <body class="font-sans text-lavender bg-deep-purple">
-  <nav class="absolute flex flex-row items-center justify-between flex-none w-full px-5 py-5 lg:px-12 bg-deep-purple">
+  <nav class="fixed z-10 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform ease-in-out lg:px-12 bg-deep-purple translate-y-0">
     <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
     <div>
       <input class="absolute z-20 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
       <img class="lg:hidden" src="img/icons/hamburger.png" />
-      <ul class="fixed top-0 right-0 z-10 flex flex-col h-full pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
+      <ul class="fixed top-0 right-0 z-10 flex flex-col h-screen pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
         <li class="text-right"><a href="#about">About</a></li>
         <li class="text-right"><a href="#faq">FAQ</a></li>
         <li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
diff --git a/script.js b/script.js
index be38aad..7ca6628 100644
--- a/script.js
+++ b/script.js
@@ -1,12 +1,41 @@
-document.addEventListener('DOMContentLoaded', e => {
-    // Hamburger navigation
+document.addEventListener('DOMContentLoaded', () => {
+    const navBar = document.querySelector('nav');
+    const navigationLinks = navBar.querySelectorAll('li');
+    const hamburgerCheckbox = navBar.querySelector('.peer');
 
-    let navigationLinks = document.querySelectorAll('nav li');
-    let hamburgerCheckbox = document.querySelector('nav .peer');
+    // Hamburger navigation
 
     navigationLinks.forEach(navigationLink => {
-      navigationLink.addEventListener('click', e => {
+      navigationLink.addEventListener('click', () => {
+        document.body.classList.remove('overflow-hidden');
         hamburgerCheckbox.checked = false;
       });
     });
+
+    // Navbar appears on scroll down and hides on scroll up
+
+    let lastScrollY = window.scrollY;
+
+    window.addEventListener('scroll', () => {
+        window.scrollY - lastScrollY > 0 ? hideNavBar() : showNavBar();
+        lastScrollY = window.scrollY;
+    });
+
+    function hideNavBar() {
+        navBar.classList.add('-translate-y-full');
+        navBar.classList.remove('translate-y-0');
+    }
+
+    function showNavBar() {
+        navBar.classList.add('translate-y-0');
+        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');
+        }
+    });
 });
diff --git a/styles.css b/styles.css
index 0a40cf3..9987ca4 100644
--- a/styles.css
+++ b/styles.css
@@ -643,18 +643,14 @@ h1, h2, h3, h4, h5, h6 {
   inset-inline-end: 0.25rem;
 }
 
-.left-0 {
-  left: 0px;
+.right-0 {
+  right: 0px;
 }
 
 .top-0 {
   top: 0px;
 }
 
-.right-0 {
-  right: 0px;
-}
-
 .isolate {
   isolation: isolate;
 }
@@ -663,6 +659,10 @@ h1, h2, h3, h4, h5, h6 {
   isolation: auto;
 }
 
+.z-0 {
+  z-index: 0;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -671,6 +671,14 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 20;
 }
 
+.z-30 {
+  z-index: 30;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
 .float-right {
   float: right;
 }
@@ -818,30 +826,24 @@ h1, h2, h3, h4, h5, h6 {
   display: none;
 }
 
-.h-screen {
-  height: 100vh;
+.h-8 {
+  height: 2rem;
 }
 
 .h-full {
   height: 100%;
 }
 
-.h-max {
-  height: -moz-max-content;
-  height: max-content;
-}
-
-.h-min {
-  height: -moz-min-content;
-  height: min-content;
+.h-screen {
+  height: 100vh;
 }
 
-.h-5 {
-  height: 1.25rem;
+.w-72 {
+  width: 18rem;
 }
 
-.h-8 {
-  height: 2rem;
+.w-8 {
+  width: 2rem;
 }
 
 .w-\[434px\] {
@@ -852,40 +854,6 @@ h1, h2, h3, h4, h5, h6 {
   width: 100%;
 }
 
-.w-max {
-  width: -moz-max-content;
-  width: max-content;
-}
-
-.w-min {
-  width: -moz-min-content;
-  width: min-content;
-}
-
-.w-5 {
-  width: 1.25rem;
-}
-
-.w-8 {
-  width: 2rem;
-}
-
-.w-96 {
-  width: 24rem;
-}
-
-.w-52 {
-  width: 13rem;
-}
-
-.w-80 {
-  width: 20rem;
-}
-
-.w-72 {
-  width: 18rem;
-}
-
 .flex-none {
   flex: none;
 }
@@ -930,11 +898,21 @@ h1, h2, h3, h4, h5, h6 {
   border-collapse: separate;
 }
 
+.-translate-y-full {
+  --tw-translate-y: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-72 {
   --tw-translate-x: 18rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .\!transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
@@ -1415,10 +1393,6 @@ h1, h2, h3, h4, h5, h6 {
   gap: 3rem;
 }
 
-.gap-16 {
-  gap: 4rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -2042,14 +2016,6 @@ h1, h2, h3, h4, h5, h6 {
   padding: 3rem;
 }
 
-.p-9 {
-  padding: 2.25rem;
-}
-
-.p-20 {
-  padding: 5rem;
-}
-
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
@@ -2743,6 +2709,10 @@ details p {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.peer:checked ~ .peer-checked\:overflow-hidden {
+  overflow: hidden;
+}
+
 @media (min-width: 640px) {
   .sm\:underline {
     text-decoration-line: underline;
@@ -2750,10 +2720,6 @@ details p {
 }
 
 @media (min-width: 1024px) {
-  .lg\:static {
-    position: static;
-  }
-
   .lg\:relative {
     position: relative;
   }
@@ -2817,6 +2783,10 @@ details p {
     gap: 3.5rem;
   }
 
+  .lg\:gap-16 {
+    gap: 4rem;
+  }
+
   .lg\:gap-2 {
     gap: 0.5rem;
   }
@@ -2829,28 +2799,15 @@ details p {
     gap: 5rem;
   }
 
-  .lg\:gap-16 {
-    gap: 4rem;
-  }
-
   .lg\:self-start {
     align-self: flex-start;
   }
 
-  .lg\:bg-lavender {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 204 255 / var(--tw-bg-opacity));
-  }
-
   .lg\:bg-deep-purple {
     --tw-bg-opacity: 1;
     background-color: rgb(27 0 44 / var(--tw-bg-opacity));
   }
 
-  .lg\:bg-opacity-0 {
-    --tw-bg-opacity: 0;
-  }
-
   .lg\:bg-fireflies {
     background-image: url('img/website-bg2.png');
   }
