add css only menu

src/components/Header.astro

@@ -11,16 +11,19 @@ import Logo from './Logo.astro';
         <Logo />
       </HeaderLink>
     </ul>
-    <button class="mobile-icon-button hamburger" title="Open navigation">
+    <input type="checkbox" id="mobile-checkbox" />
+    <label for="mobile-checkbox" class="mobile-icon-button" title="Toggle navigation">
+      <div class="mobile-icon-button-icon icon-open">
         <span class="line"></span>
         <span class="line"></span>
         <span class="line"></span>
-    </button>
+      </div>
-    <button class="mobile-icon-button close" title="Close navigation">
+      <div class="mobile-icon-button-icon icon-close">
         <span class="line line-ltr"></span>
         <span class="line line-rtl"></span>
-    </button>
+      </div>
       <div class="menu-backdrop"></div>
+    </label>
     <ul class="menu">
       <HeaderLink href="https://app.memorytwin.com/en/nzambello/Nicola" target="_blank" rel="noopener noreferrer">Twin</HeaderLink>
       <HeaderLink href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">GitHub</HeaderLink>
@@ -77,6 +80,9 @@ import Logo from './Logo.astro';
     padding: 0;
     order: 1;
   }
+  input#mobile-checkbox {
+    display: none;
+  }
 
   .mobile-icon-button {
     padding: 10px;
@@ -97,11 +103,11 @@ import Logo from './Logo.astro';
     border-color: var(--primary);
   }
 
-  .mobile-icon-button.hamburger {
+  .mobile-icon-button-icon.icon-open {
     margin-left: 1rem;
   }
 
-  .mobile-icon-button.hamburger .line {
+  .mobile-icon-button-icon .line {
     display: block;
     width: 40px;
     height: 3px;
@@ -109,11 +115,7 @@ import Logo from './Logo.astro';
     background-color: var(--text-color);
   }
 
-  nav#navigation.opened ul.menu,
+  #mobile-checkbox:checked ~ ul.menu {
-  ul.menu:focus,
-  ul.menu:focus-within,
-  .mobile-icon-button.hamburger:focus ~ ul.menu,
-  .mobile-icon-button.hamburger:focus-within ~ ul.menu {
     display: flex;
     max-width: 100vw;
     padding: 3rem 1rem;
@@ -123,21 +125,19 @@ import Logo from './Logo.astro';
     display: none;
   }
 
-  nav#navigation.opened .menu-backdrop,
+  #mobile-checkbox:checked ~ .mobile-icon-button .menu-backdrop {
-  .mobile-icon-button.hamburger:focus ~ .menu-backdrop,
-  .mobile-icon-button.hamburger:focus-within ~ .menu-backdrop {
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    backdrop-filter: blur(2px);
+    backdrop-filter: blur(5px);
     z-index: 1;
     background: rgba(0, 0, 0, 0.2);
   }
 
-  .mobile-icon-button.close {
+  .mobile-icon-button-icon.icon-close {
     display: none;
     position: fixed;
     right: calc(80vw + 0.5rem);
@@ -145,31 +145,30 @@ import Logo from './Logo.astro';
     z-index: 10;
   }
 
-  nav#navigation.opened .mobile-icon-button.close,
+  #mobile-checkbox:checked ~ .mobile-icon-button .mobile-icon-button-icon.icon-close {
-  .mobile-icon-button.hamburger:focus ~ .mobile-icon-button.close,
-  .mobile-icon-button.hamburger:focus-within ~ .mobile-icon-button.close {
     display: inline-block;
   }
 
-  .mobile-icon-button.close .line {
+  .mobile-icon-button-icon.icon-close .line {
     display: block;
     width: 40px;
     height: 5px;
     background-color: var(--secondary-inverse);
     position: relative;
   }
-  .mobile-icon-button.close .line.line-ltr {
+  .mobile-icon-button-icon.icon-close .line.line-ltr {
     transform: rotate(45deg);
-    top: 2.5px;
+    top: 20px;
   }
-  .mobile-icon-button.close .line.line-rtl {
+  .mobile-icon-button-icon.icon-close .line.line-rtl {
     transform: rotate(-45deg);
-    top: -2.5px;
+    top: 5px;
   }
 
   @media (min-width: 768px) {
+    #mobile-checkbox,
     .mobile-icon-button {
-      display: none;
+      display: none !important;
     }
     nav ul.logo-container {
       flex-grow: 0;
@@ -191,7 +190,7 @@ import Logo from './Logo.astro';
       padding: 0;
       margin-right: 1rem;
     }
-    nav#navigation.opened ul.menu,
+    #mobile-checkbox:checked ~ ul.menu,
     ul.menu:focus,
     ul.menu:focus-within {
       padding: 0;
@@ -207,76 +206,18 @@ import Logo from './Logo.astro';
 <script>
   (() => {
     if (window.innerWidth < 768) {
-      let nav = document.getElementById('navigation');
-      let hamburger = document.querySelector('.mobile-icon-button.hamburger');
-      let close = document.querySelector('.mobile-icon-button.close');
       let menuItems = document.querySelectorAll('ul.menu li a');
-
+      let mobileCheckbox = document.getElementById('mobile-checkbox');
-      if (!hamburger) {
-        console.error('Missing navigation elements');
-        return;
-      }
-      hamburger.addEventListener('click', function (e) {
-        e.preventDefault();
-
-        if (!nav || !hamburger || !close) {
-          console.error('Missing navigation elements');
-          return;
-        }
-
-        if (nav.classList.contains('opened')) {
-          nav.classList.remove('opened');
-          hamburger.setAttribute('aria-expanded', 'false');
-          close.setAttribute('aria-expanded', 'false');
-        } else {
-          nav.classList.add('opened');
-          hamburger.setAttribute('aria-expanded', 'true');
-          close.setAttribute('aria-expanded', 'true');
-        }
-      });
-
-      let backdrop = document.querySelector('.menu-backdrop');
-      if (backdrop) {
-        backdrop.addEventListener('click', function (e) {
-          e.preventDefault();
-
-          if (!nav || !hamburger || !close) {
-            console.error('Missing navigation elements');
-            return;
-          }
-
-          nav.classList.remove('opened');
-          hamburger.setAttribute('aria-expanded', 'false');
-          close.setAttribute('aria-expanded', 'false');
-        });
-      }
-
-      if (close) {
-        close.addEventListener('click', function (e) {
-          e.preventDefault();
-
-          if (!nav || !hamburger || !close) {
-            console.error('Missing navigation elements');
-            return;
-          }
-
-          nav.classList.remove('opened');
-          hamburger.setAttribute('aria-expanded', 'false');
-          close.setAttribute('aria-expanded', 'false');
-        });
-      }
 
       if (menuItems) {
         menuItems.forEach(item => {
           item.addEventListener('click', function (e) {
-            if (!nav || !hamburger || !close) {
+            if (!mobileCheckbox) {
-              console.error('Missing navigation elements');
+              console.error('Missing checkbox');
               return;
             }
 
-            nav.classList.remove('opened');
+            mobileCheckbox.click();
-            hamburger.setAttribute('aria-expanded', 'false');
-            close.setAttribute('aria-expanded', 'false');
           });
         });
       }

src/styles/global.css

@@ -162,3 +162,7 @@ button:active {
     --border-color: transparent;
     --color: var(--text-color);
 }
+
+main ul li {
+    list-style: circle;
+}