fix menu slider

solygambas · solygambas · commit 11b9c7324be6 · 2021-03-12T21:38:28.000+01:00
diff --git a/64-menu slider modal/index.html b/64-menu slider modal/index.html
@@ -13,7 +13,7 @@
     <title>Menu Slider & Modal</title>
   </head>
   <body>
-    <nav>
+    <nav id="navbar">
       <div class="logo">
         <img
           src="https://randomuser.me/api/portraits/women/74.jpg"
diff --git a/64-menu slider modal/script.js b/64-menu slider modal/script.js
@@ -3,10 +3,26 @@ const open = document.getElementById("open");
 const close = document.getElementById("close");
 const modal = document.getElementById("modal");
 
+function closeNavbar(e) {
+  if (
+    document.body.classList.contains("show-nav") &&
+    e.target !== toggle &&
+    !toggle.contains(e.target) &&
+    e.target !== navbar &&
+    !navbar.contains(e.target)
+  ) {
+    document.body.classList.toggle("show-nav");
+    document.body.removeEventListener("click", closeNavbar);
+  } else if (!document.body.classList.contains("show-nav")) {
+    document.body.removeEventListener("click", closeNavbar);
+  }
+}
+
 // Menu Slider
-toggle.addEventListener("click", () =>
-  document.body.classList.toggle("show-nav")
-);
+toggle.addEventListener("click", () => {
+  document.body.classList.toggle("show-nav");
+  document.body.addEventListener("click", closeNavbar);
+});
 
 // Modal
 open.addEventListener("click", () => modal.classList.add("show-modal"));
diff --git a/64-menu slider modal/style.css b/64-menu slider modal/style.css
@@ -32,7 +32,7 @@ nav {
   top: 0;
   left: 0;
   width: 200px;
-  height: 100vh;
+  height: 100%;
   z-index: 100;
   transform: translateX(-100%);
 }

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ nav {`
`32`	`32`	`top: 0;`
`33`	`33`	`left: 0;`
`34`	`34`	`width: 200px;`
`35`		`- height: 100vh;`
	`35`	`+ height: 100%;`
`36`	`36`	`z-index: 100;`
`37`	`37`	`transform: translateX(-100%);`
`38`	`38`	`}`