portfolio overhaul

public/scripts/mobile.js

@@ -1,12 +1,32 @@
 const doc = document;
+const body = doc.body;
 const menuOpen = doc.querySelector(".menu");
 const menuClose = doc.querySelector(".close");
 const overlay = doc.querySelector(".overlay");
 
-menuOpen.addEventListener("click", () => {
-  overlay.classList.add("overlay--active");
-});
+if (menuOpen && menuClose && overlay) {
+  const openMenu = () => {
+    overlay.classList.add("overlay--active");
+    body.classList.add("menu-open");
+  };
 
-menuClose.addEventListener("click", () => {
-  overlay.classList.remove("overlay--active");
-});
+  const closeMenu = () => {
+    overlay.classList.remove("overlay--active");
+    body.classList.remove("menu-open");
+  };
+
+  menuOpen.addEventListener("click", openMenu);
+  menuClose.addEventListener("click", closeMenu);
+
+  overlay.addEventListener("click", (event) => {
+    if (event.target === overlay) {
+      closeMenu();
+    }
+  });
+
+  window.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      closeMenu();
+    }
+  });
+}