From d1c9ab6527b00e11e5c4296f52d2d0e1252cec45 Mon Sep 17 00:00:00 2001
From: Joe Hutchinson <hutch7995@gmail.com>
Date: Thu, 3 Mar 2022 22:42:35 -0500
Subject: Make menu work without JS (#75)

* First pass no-js menu

* Make overlay menu work without js

* Fix shifting menu on chrome

* Fix htmlvalidator issue and ARIA misuse
---
 assets/css/style.css          | 35 ++++++++++++++++++++++-------------
 assets/js/core.js             | 14 ++++++--------
 layouts/partials/nav-bar.html |  7 +++++--
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 7e0db90..b3a4aa5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -71,44 +71,53 @@ p {
     z-index: 105;
 }
 .hamburger-menu {
-    display: block;
+    display: flex;
+    align-items: center;
     position: relative;
+    width: 33px;
+    height: 33px;
     z-index: 105;
     -webkit-user-select: none;
     user-select: none;
 }
-.hamburger-menu button {
+.hamburger-menu-button {
     display: block;
-    position: relative;
+    position: absolute;
     width: 33px;
     height: 33px;
-    padding: 0px;
-    border: 0px;
-    outline: none;
-    background-color: transparent;
     z-index: 500; /* and place it over the hamburger */
     -webkit-touch-callout: none;
     cursor: pointer;
+    opacity: 0;
 }
-.hamburger-menu button span {
+.hamburger-menu-icon {
+    position: relative;
+    z-index: 499;
+}
+.hamburger-menu-icon span {
     display: block;
     width: 33px;
     height: 3px;
-    position: relative;
     background-color: #454545;
     border-radius: 3px;
     transform-origin: center;
     transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0),
                 background-color 0.3s cubic-bezier(0.77,0.2,0.05,1.0);
 }
-.hamburger-menu button span:first-of-type {
+.hamburger-menu-icon span:first-of-type {
     margin-bottom: 6px;
 }
-.hamburger-menu-open button span {
+.hamburger-menu-button:checked {
+    position: fixed;
+}
+.hamburger-menu-button:checked + .hamburger-menu-icon {
+    position: fixed;
+}
+.hamburger-menu-button:checked + .hamburger-menu-icon span {
     background-color: white;
     transform: rotate(45deg) translate(3.2px , 3.2px);
 }
-.hamburger-menu-open button span:last-of-type {
+.hamburger-menu-button:checked + .hamburger-menu-icon span:last-of-type {
     transform: rotate(-45deg) translate(3.2px , -3.2px);
 }
 .hamburger-menu-overlay {
@@ -129,7 +138,7 @@ p {
     opacity: 0;
     transition: visibility 0.2s ease-out, opacity 0.2s ease-out;
 }
-.hamburger-menu-open .hamburger-menu-overlay {
+.hamburger-menu-button:checked ~ .hamburger-menu-overlay {
     visibility: visible;
     opacity: 0.9;
 }
diff --git a/assets/js/core.js b/assets/js/core.js
index 6420831..3879b54 100644
--- a/assets/js/core.js
+++ b/assets/js/core.js
@@ -7,16 +7,14 @@ function cardReleased() {
 }
 
 function hamburgerMenuPressed() {
-    if (this.parentNode.classList.contains('hamburger-menu-open')) {
-        document.body.classList.remove('no-scroll');
-        this.parentNode.classList.remove('hamburger-menu-open')
-        this.setAttribute('aria-expanded', "false");
-        document.body.style.paddingRight = 0 + "px";
-    } else {
+    if (this.checked) {
+        this.setAttribute('aria-expanded', "true");
         document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
         document.body.classList.add('no-scroll');
-        this.parentNode.classList.add('hamburger-menu-open')
-        this.setAttribute('aria-expanded', "true");
+    } else {
+        this.setAttribute('aria-expanded', "false");
+        document.body.classList.remove('no-scroll');
+        document.body.style.paddingRight = 0 + "px";
     }
     
 }
\ No newline at end of file
diff --git a/layouts/partials/nav-bar.html b/layouts/partials/nav-bar.html
index be482dd..804827e 100644
--- a/layouts/partials/nav-bar.html
+++ b/layouts/partials/nav-bar.html
@@ -7,10 +7,13 @@
     {{ end -}}
   </a></h1>
   <div class="hamburger-menu">
-    <button onclick="hamburgerMenuPressed.call(this)" aria-haspopup="true" aria-expanded="false" aria-controls="menu" aria-label="Menu">
+    <input class="hamburger-menu-button" type="checkbox"
+      onclick="hamburgerMenuPressed.call(this)"
+    >
+    <div class="hamburger-menu-icon">
       <span></span>
       <span></span>
-    </button>
+    </div>
     <ul id="menu" class="hamburger-menu-overlay">
       <li><a href="{{ .Site.BaseURL }}" class="hamburger-menu-overlay-link">Home</a></li>
       {{ range where .Site.Pages "Params.displayinmenu" true -}}
-- 
cgit v1.2.3