hamburger mobile responsiveness works

pbrucla · Jun 24, 2024 · 1afaaa5 · 1afaaa5
1 parent b919c9e
commit 1afaaa5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 31 deletions.
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,9 +1,4 @@
-<div class="nav-toggle hamburger-container enabled">
-    <input type="checkbox" class="hamburger-toggle" checked>
-    <div class="hamburger-button"></div>
-</div>
-
-<nav class="ope">
+<nav class="open">
     <div class="hex" role="img" aria-label="Navigation bar background graphic, styled like the address panel of a hex editor.">
         <ol>
             {%- for i in (0..256) -%}
@@ -25,13 +20,41 @@
             </li>
         {%- endfor -%}
     </ul>
-</div>
 
 </nav>
 
+<div class="nav-toggle hamburger-container">
+    <div class="hamburger-button"></div>
+</div>
+
+
 <script>
+    const responsiveNavThreshold = 500;
     const navOpener = document.querySelector('.nav-toggle');
-    const navClasses = document.querySelector('nav').classList;
+    const nav = document.querySelector('nav');
+
+    const toggle = (cl, attr) => cl.contains(attr) ? cl.remove(attr) : cl.add(attr);
+
+    navOpener.addEventListener('click', () => {
+        toggle(nav.classList, 'open');
+    });
+
+    let enabled = false;
 
-    navOpener.addEventListener('click', () => navClasses.contains('open') ? navClasses.add('open') : navClasses.remove('open'));
+    const setResponsive = () => {
+        if (window.innerWidth < responsiveNavThreshold) {
+            if (enabled) return;
+            enabled = true;
+            nav.classList.remove('open');
+            navOpener.classList.add('enabled');
+        }
+        else {
+            if (!enabled) return;
+            enabled = false;
+            nav.classList.add('open');
+            navOpener.classList.remove('enabled');
+        }
+    };
+    setResponsive();
+    window.addEventListener('resize', setResponsive);
 </script>
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
@@ -17,6 +17,7 @@ body {
   --nav-footer-line-height: calc(var(--nav-footer-line-height-multiplier) * var(--nav-footer-font-size));
   --cyber-yellow: #FFBD3F;
   --cyber-dark-grey: #2c2c2c;
+  --arcimation: 400ms cubic-bezier(.23,1,.32,1);
 }
 
 body, p, code {

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -1,9 +1,10 @@
+// set a margin-left on content when navbar is open
 body:has(nav.open) .content {
     margin-left: var(--nav-width);
 }
 
 body:has(.nav-toggle.enabled) {
-    margin-top: 0.125rem;
+    margin-top: 1rem;
 }
 
 .content {

diff --git a/assets/styles/nav.scss b/assets/styles/nav.scss
@@ -1,32 +1,31 @@
-nav:not(.open) > * {
-    display: none;
-}
-
+// when it is opened, a sliding effect will be created
 nav:not(.open) {
-    padding: 0;
+    transform: translateX(-100%);
 }
 
-body:has(nav.open) .nav-toggle {
+.nav-toggle:not(.enabled) {
     display: none;
 }
 
 .nav-toggle {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    padding: 1.25rem 0.5rem;
-    background: var(--cyber-dark-grey);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    top: 0.25rem;
+    left: 0.25rem;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.5rem;
+    font-size: 2rem;
+    // below means 90% cyber-yellow, 10% black
+    background: color-mix(in srgb, var(--cyber-yellow) 90%, black);
 }
 
 /* yes this hamburger code is stolen directly from myself @ lactf ~ andrew */
 /* heehee i stole this hamburger code from andrew @ acmcyber.com ~ ronak */
 
-.hamburger-toggle {
-  display: none;
-}
-
 .hamburger-button {
   &,
   &::before,
@@ -37,7 +36,7 @@ body:has(nav.open) .nav-toggle {
     width: 30px;
     background-color: white;
     border-radius: 2px;
-    transition: transform ease-out;
+    transition: transform var(--arcimation);
   }
 
   &::before {
@@ -51,17 +50,17 @@ body:has(nav.open) .nav-toggle {
   }
 }
 
-.hamburger-toggle:checked {
-  & ~ .hamburger-container .hamburger-button::before {
+body:has(nav.open) {
+  .hamburger-button::before {
     margin-top: 0px;
     transform: rotate(405deg);
   }
 
-  & ~ .hamburger-container .hamburger-button {
+  .hamburger-button {
     background: transparent;
   }
 
-  & ~ .hamburger-container .hamburger-button::after {
+  .hamburger-button::after {
     margin-top: 0px;
     transform: rotate(-405deg);
   }
@@ -78,6 +77,7 @@ nav {
     padding: 1rem 0rem 0rem 1.75ch;
     -webkit-padding-start: 0.4rem;
     width: calc(var(--nav-width) - 2rem);
+    transition: var(--arcimation);
 
     div.hex {
         position: absolute;