Initial commit

js/app.js

@@ -0,0 +1,57 @@
+  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();
+	}
+  });