Update website

index.html

@@ -137,5 +137,6 @@
       <a class="footer-email" href="mailto:info@engineeringbuild.com">info@engineeringbuild.com</a>
     </div>
   </footer>
+  <script src="main.js"></script>
 </body>
 </html>

main.css

@@ -411,7 +411,23 @@ a {
   }
 
   .site-nav {
-    gap: 12px;
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+  }
+
+  .site-nav > a,
+  .nav-trigger {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0;
+  }
+
+  .nav-group {
+    width: 100%;
   }
 
   .hero-section {
@@ -446,10 +462,26 @@ a {
     grid-template-columns: 1fr;
   }
 
+  .nav-group:hover > .nav-panel,
+  .nav-group:focus-within > .nav-panel {
+    display: none;
+  }
+
+  .nav-group.is-open > .nav-panel {
+    display: grid;
+    gap: 8px;
+  }
+
   .nav-panel {
     position: static;
     min-width: 0;
+    width: 100%;
+    padding: 8px;
     box-shadow: none;
-    margin-top: 8px;
+    margin: 0 0 8px;
+  }
+
+  .nav-panel a {
+    padding: 10px 12px;
   }
 }

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);