fix: back to top button, side navigation

views/nav.php

@@ -11,6 +11,7 @@
     </div>
 
     <div class="nav-links" id="nav-links" role="navigation">
+        <button class="nav-close-btn" id="nav-close-btn" aria-label="Close menu">×</button>
         <a href="index.php#about"        class="nav-item">About</a>
         <a href="index.php#projects"     class="nav-item">Work</a>
         <a href="index.php#certificates" class="nav-item">Certs</a>
@@ -23,6 +24,9 @@
     </div>
 </nav>
 
+<!-- Nav overlay backdrop -->
+<div class="nav-overlay" id="nav-overlay"></div>
+
 <!-- Shared Navigation Script -->
 <script>
 document.addEventListener("DOMContentLoaded", () => {
@@ -36,39 +40,50 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     // 2. Mobile Hamburger Menu
-    const hamburger = document.getElementById("hamburger");
-    const navLinks  = document.getElementById("nav-links");
-    const navItems  = document.querySelectorAll(".nav-item");
+    const hamburger  = document.getElementById("hamburger");
+    const navLinks   = document.getElementById("nav-links");
+    const navCloseBtn = document.getElementById("nav-close-btn");
+    const navOverlay = document.getElementById("nav-overlay");
+    const navItems   = document.querySelectorAll(".nav-item");
 
     if (hamburger && navLinks) {
+        function openMenu() {
+            hamburger.classList.add("active");
+            navLinks.classList.add("active");
+            if (navOverlay) navOverlay.classList.add("active");
+            hamburger.setAttribute("aria-expanded", "true");
+            document.body.style.overflow = "hidden";
+        }
+
         function closeMenu() {
             hamburger.classList.remove("active");
             navLinks.classList.remove("active");
+            if (navOverlay) navOverlay.classList.remove("active");
             hamburger.setAttribute("aria-expanded", "false");
+            document.body.style.overflow = "";
         }
 
         hamburger.addEventListener("click", (e) => {
             e.stopPropagation();
-            const isOpen = hamburger.classList.toggle("active");
-            navLinks.classList.toggle("active");
-            hamburger.setAttribute("aria-expanded", isOpen);
+            if (hamburger.classList.contains("active")) {
+                closeMenu();
+            } else {
+                openMenu();
+            }
         });
 
+        // Close via X button
+        if (navCloseBtn) navCloseBtn.addEventListener("click", closeMenu);
+
+        // Close via overlay click
+        if (navOverlay) navOverlay.addEventListener("click", closeMenu);
+
         // Close on nav link click
         navItems.forEach(item => item.addEventListener("click", closeMenu));
 
-        // Close when clicking outside the menu
-        document.addEventListener("click", (e) => {
-            if (navLinks.classList.contains("active") && !navLinks.contains(e.target) && !hamburger.contains(e.target)) {
-                closeMenu();
-            }
-        });
-
         // Close on scroll
-        window.addEventListener('scroll', () => {
-            if (navLinks.classList.contains('active')) {
-                closeMenu();
-            }
+        window.addEventListener("scroll", () => {
+            if (navLinks.classList.contains("active")) closeMenu();
         });
     }
 });