Update website

main.js

@@ -20,7 +20,7 @@ function renderSiteHeader(root) {
         <a href="${root}index.html">Home</a>
 
         <div class="nav-group">
-          <button class="nav-trigger" type="button" aria-haspopup="true">Services</button>
+          <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Services</button>
           <div class="nav-panel">
             <a href="${root}services/Network.html">Network Planning</a>
             <a href="${root}services/servers.html">Server Setup</a>
@@ -30,7 +30,7 @@ function renderSiteHeader(root) {
         </div>
 
         <div class="nav-group">
-          <button class="nav-trigger" type="button" aria-haspopup="true">Guides</button>
+          <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Guides</button>
           <div class="nav-panel">
             <a href="${root}guides/telecommunications.html">Telecommunications</a>
             <a href="${root}guides/networking.html">Networking</a>
@@ -40,7 +40,7 @@ function renderSiteHeader(root) {
         </div>
 
         <div class="nav-group">
-          <button class="nav-trigger" type="button" aria-haspopup="true">Tools</button>
+          <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Tools</button>
           <div class="nav-panel">
             <a href="${root}tools.html">Coming soon</a>
           </div>
@@ -81,3 +81,43 @@ document.querySelectorAll('[data-include="site-header"]').forEach((target) => {
 document.querySelectorAll('[data-include="site-footer"]').forEach((target) => {
   target.outerHTML = renderSiteFooter(siteRoot);
 });
+
+const mobileMenuQuery = window.matchMedia('(max-width: 720px)');
+
+function closeMobileMenus() {
+  document.querySelectorAll('.nav-group.is-open').forEach((group) => {
+    group.classList.remove('is-open');
+    group.querySelector('.nav-trigger')?.setAttribute('aria-expanded', 'false');
+  });
+}
+
+document.querySelectorAll('.nav-trigger').forEach((trigger) => {
+  trigger.setAttribute('aria-expanded', 'false');
+
+  trigger.addEventListener('click', (event) => {
+    if (!mobileMenuQuery.matches) {
+      return;
+    }
+
+    event.preventDefault();
+    const group = trigger.closest('.nav-group');
+    const isOpen = group.classList.contains('is-open');
+
+    closeMobileMenus();
+
+    if (!isOpen) {
+      group.classList.add('is-open');
+      trigger.setAttribute('aria-expanded', 'true');
+    }
+  });
+});
+
+document.addEventListener('click', (event) => {
+  if (!mobileMenuQuery.matches || event.target.closest('.site-nav')) {
+    return;
+  }
+
+  closeMobileMenus();
+});
+
+mobileMenuQuery.addEventListener('change', closeMobileMenus);