usability changes

public/js/app.js

@@ -21,17 +21,30 @@ const navEl   = document.getElementById('nav');
 const viewEl  = document.getElementById('view');
 const themeBtn= document.getElementById('themeToggle');
 const navToggleBtn = document.getElementById('navToggle');
+const mobileNavOverlay = document.getElementById('mobileNavOverlay');
 initTheme(themeBtn);
 
 // Mobile navigation toggle
 navToggleBtn.addEventListener('click', () => {
   navEl.classList.toggle('mobile-active');
+  mobileNavOverlay.classList.toggle('active');
+});
+
+// Close mobile nav when clicking overlay
+mobileNavOverlay.addEventListener('click', () => {
+  navEl.classList.remove('mobile-active');
+  mobileNavOverlay.classList.remove('active');
 });
 
 // Close mobile nav when clicking outside
 document.addEventListener('click', (e) => {
-  if (!navEl.contains(e.target) && !navToggleBtn.contains(e.target)) {
-    navEl.classList.remove('mobile-active');
+  // Only close if nav is currently open
+  if (navEl.classList.contains('mobile-active')) {
+    // Close if clicking outside both nav and toggle button
+    if (!navEl.contains(e.target) && !navToggleBtn.contains(e.target)) {
+      navEl.classList.remove('mobile-active');
+      mobileNavOverlay.classList.remove('active');
+    }
   }
 });
 
@@ -40,6 +53,7 @@ navEl.addEventListener('click', (e) => {
   const a = e.target.closest('a[data-calc]');
   if (a) {
     navEl.classList.remove('mobile-active');
+    mobileNavOverlay.classList.remove('active');
   }
 });