remove mobile menu js

404.html

@@ -59,13 +59,6 @@
 			  <span class="visually-hidden">Home page</span>
 			</a>
 		  
-			<nav class="desktop-nav" aria-label="Primary navigation">
-			  <ul>
-				<li><a href="/" class="menu-button">Work</a></li>
-				<li><a href="/about.html" class="menu-button">About</a></li>
-				<li><a href="/privacy.html" class="menu-button">Blog</a></li>
-			  </ul>
-			</nav>
 		  </div>
 		  
 		  <div class="menu-right">
@@ -81,44 +74,9 @@
 			</ul>
 		  </nav>
 	  
-		  <button
-			class="menu-toggle"
-			id="menuToggle"
-			type="button"
-			aria-expanded="false"
-			aria-controls="mobileMenu"
-			aria-haspopup="true"
-			aria-label="Open menu"
-		  >
-			Menu
-		  </button>
 		  </div>
 		</div>
 	  </header>
-	  
-	  <div class="menu-overlay" id="menuOverlay" hidden></div>
-	  
-	  <aside
-		class="mobile-menu"
-		id="mobileMenu"
-		aria-label="Mobile navigation"
-		aria-hidden="true"
-	  >
-		<div class="mobile-menu__header">
-		  <strong>Menu</strong>
-		  <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-			Close
-		  </button>
-		</div>
-	  
-		<nav aria-label="Mobile navigation">
-		  <ul>
-			<li><a href="/" class="button-primary" aria-current="page">Work</a></li>
-			<li><a href="/legal-notice.html" class="button-primary">About</a></li>
-			<li><a href="/privacy.html" class="button-primary">Blog</a></li>
-		  </ul>
-		</nav>
-	  </aside>
 
 	<main>
 		<section>

css/style.css

@@ -603,100 +603,6 @@ button:visited, .button-primary:visited, .logo:visited {
   display: block;
 }
 
-.menu-toggle {
-  display: none;
-  position: relative;
-  transition: transform 0.25s ease, opacity 0.25s ease;
-}
-
-.menu-toggle.is-open {
-  opacity: 0;
-}
-
-.menu-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--overlay);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.25s ease;
-  z-index: 200;
-}
-
-.mobile-menu {
-  position: fixed;
-  inset: auto 1rem 1rem 1rem;
-  width: auto;
-  max-width: 24rem;
-  margin-inline: auto;
-  background: var(--panel);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgb(255 255 255 / 0.45);
-  border-radius: 1rem;
-  box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
-  padding: 1rem;
-  opacity: 0;
-  transform: translateY(1rem) scale(0.98);
-  pointer-events: none;
-  transition: opacity 0.25s ease, transform 0.25s ease;
-  z-index: 300;
-}
-
-.mobile-menu__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.mobile-menu ul {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.mobile-menu a {
-  display: block;
-  padding: 0.95rem 1rem;
-  border-radius: 0.75rem;
-  background: rgb(255 255 255 / 0.56);
-}
-
-/* .page-content {
-  padding: 3rem 1.25rem;
-} */
-
-.menu-open .menu-overlay {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.menu-open .mobile-menu {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  pointer-events: auto;
-}
-
-@media (max-width: 579px) {
-  .desktop-nav {
-    display: none;
-  }
-
-  .menu-toggle {
-    display: inline-block;
-  }
-}
-
-@media (min-width: 580px) {
-  .menu-overlay,
-  .mobile-menu {
-    display: none;
-  }
-}
-
-
 /* Maint content */
 
 main, footer {

index.html

@@ -40,14 +40,6 @@
           <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
           <span class="visually-hidden">Home page</span>
         </a>
-      
-        <nav class="desktop-nav" aria-label="Primary navigation">
-          <ul>
-            <li><a href="/" class="menu-button" aria-current="page">Work</a></li>
-            <li><a href="/about.html" class="menu-button">About</a></li>
-            <li><a href="/privacy.html" class="menu-button">Blog</a></li>
-          </ul>
-        </nav>
       </div>
       
       <div class="menu-right">
@@ -62,46 +54,10 @@
             </svg><span class="visually-hidden">Change light/dark mode</span></button></li>
         </ul>
       </nav>
-  
-      <button
-        class="menu-toggle"
-        id="menuToggle"
-        type="button"
-        aria-expanded="false"
-        aria-controls="mobileMenu"
-        aria-haspopup="true"
-        aria-label="Open menu"
-      >
-        Menu
-      </button>
       </div>
     </div>
   </header>
   
-  <div class="menu-overlay" id="menuOverlay" hidden></div>
-  
-  <aside
-    class="mobile-menu"
-    id="mobileMenu"
-    aria-label="Mobile navigation"
-    aria-hidden="true"
-  >
-    <div class="mobile-menu__header">
-      <strong>Menu</strong>
-      <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-        Close
-      </button>
-    </div>
-  
-    <nav aria-label="Mobile navigation">
-      <ul>
-        <li><a href="/" class="button-primary" aria-current="page">Work</a></li>
-        <li><a href="/legal-notice.html" class="button-primary">About</a></li>
-        <li><a href="/privacy.html" class="button-primary">Blog</a></li>
-      </ul>
-    </nav>
-  </aside>
-  
   <main id="siteContent" class="page-content">
     
     <!--  target="_blank" rel="noopener noreferrer"  -->

js/app.js

@@ -1,64 +1,3 @@
-// Menu system
-
-  const body = document.body;
-  const menuToggle = document.getElementById('menuToggle');
-  const menuClose = document.getElementById('menuClose');
-  const menuOverlay = document.getElementById('menuOverlay');
-  const mobileMenu = document.getElementById('mobileMenu');
-  const siteContent = document.getElementById('siteContent');
-
-  function openMenu() {
-	body.classList.add('menu-open');
-	menuOverlay.hidden = false;
-	menuToggle.classList.add('is-open');
-	menuToggle.setAttribute('aria-expanded', 'true');
-	menuToggle.setAttribute('aria-label', 'Close menu');
-	mobileMenu.setAttribute('aria-hidden', 'false');
-	siteContent.setAttribute('inert', '');
-	menuClose.focus();
-  }
-
-  function closeMenu() {
-	body.classList.remove('menu-open');
-	menuToggle.classList.remove('is-open');
-	menuToggle.setAttribute('aria-expanded', 'false');
-	menuToggle.setAttribute('aria-label', 'Open menu');
-	mobileMenu.setAttribute('aria-hidden', 'true');
-	siteContent.removeAttribute('inert');
-	menuToggle.focus();
-
-	window.setTimeout(() => {
-	  if (!body.classList.contains('menu-open')) {
-		menuOverlay.hidden = true;
-	  }
-	}, 250);
-  }
-
-  function toggleMenu() {
-	if (body.classList.contains('menu-open')) {
-	  closeMenu();
-	} else {
-	  openMenu();
-	}
-  }
-
-  menuToggle.addEventListener('click', toggleMenu);
-  menuClose.addEventListener('click', closeMenu);
-  menuOverlay.addEventListener('click', closeMenu);
-
-  document.addEventListener('keydown', (event) => {
-	if (event.key === 'Escape' && body.classList.contains('menu-open')) {
-	  closeMenu();
-	}
-  });
-
-  window.addEventListener('resize', () => {
-	if (window.innerWidth >= 768 && body.classList.contains('menu-open')) {
-	  closeMenu();
-	}
-  });
-  
-  
 // accessibility toggle
 
 {