add a background to the modal

Author: carlosjorger

Diff for: css/navbar.css

@@ -51,31 +51,44 @@
 }
 
 .nav-header-menu {
-  position: absolute;
   padding: 1em;
   z-index: 2;
   width: 100%;
   background-color: rgb(38, 26, 50);
 }
 
-#nav-columnar-menu {
+#nav-columnar-menu-background {
+  visibility: hidden;
   position: absolute;
   padding: 0em;
   margin-top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  top: 0;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s ease-in;
+}
+#nav-columnar-menu-background.active{
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: all 0.8s ease-in;
+}
+#nav-columnar-menu{
+  position: absolute;
+  margin-top: 0;
   background-color: rgb(38, 26, 50);
   width: 70%;
-  z-index: 3;
+  height: 100vh;
   left: -100vw;
-  list-style-type: none;  
+  list-style-type: none;
   transition: all 0.3s ease-in;
-  height: 100vh;
-
 }
-
 #nav-columnar-menu.active {
-  transition: all 0.8s ease-in;
   left: 0;
-  height: 100vh;
+  transition: all 0.8s ease-in;
+  /* background-color: rgba(0, 0, 0, 0.452); */
+
 }
 
 .nav-element {
@@ -91,6 +104,6 @@
 .nav-link.compressed {
   padding: 0;
 }
-.nav-link-label{
-    padding-left: 2em;
+.nav-link-label {
+  padding-left: 2em;
 }

Diff for: css/styles.css

@@ -69,15 +69,7 @@ i {
 
 
 /* || UTILITIES */
-.oscured{
-  transition: all 0.3s ease-in;
-}
-.oscured.opacity-effect {
-  filter: opacity(50%);
-  -webkit-filter:  opacity(50%) ;
-  transition: all 0.8s ease-in;
 
-}
 
 .reveal {
   opacity: 0;

Diff for: index.html

@@ -52,9 +52,10 @@
       </ul>
     </nav>
     <nav class="navbar-compressed">
-      <div class="nav-header-menu oscured">
+      <div class="nav-header-menu">
         <a class="icon-link" id="show-nav-columnar-menu"><i class="fa fa-bars fa-xl"></i></a>
       </div>
+     <div id="nav-columnar-menu-background">
       <ul id="nav-columnar-menu">
         <li class="nav-element">
           <a class="nav-link compressed" href="#"><h1 class="nav-link-label">Home</h1></a>
@@ -70,9 +71,10 @@
         </li>
 
       </ul>
+     </div>
     </nav>
   </header>
- <main class="oscured">
+ <main>
   <section>
     <div class="presentation centered-article">
       <h1 id="presentation-title">Hi, I am <br class='br-show'>Carlos Jorge!</h1>

Diff for: index.js

@@ -13,28 +13,31 @@ function reveal() {
 window.addEventListener("scroll", reveal);
 function removeActive(navColumnarMenu) {
   navColumnarMenu.classList.remove("active");
-  [...document.getElementsByClassName('oscured')].forEach(
-    (element)=>{
-      element.classList.remove("opacity-effect");
-    }
-  )
+  [...document.getElementsByClassName("oscured")].forEach((element) => {
+    element.classList.remove("opacity-effect");
+  });
 }
 function addActive(navColumnarMenu) {
   navColumnarMenu.classList.add("active");
-  [...document.getElementsByClassName('oscured')].forEach(
-    (element)=>{
-      element.classList.add("opacity-effect");
-    }
-  )
+  [...document.getElementsByClassName("oscured")].forEach((element) => {
+    element.classList.add("opacity-effect");
+  });
 }
 document.addEventListener("DOMContentLoaded", function (event) {
   [...document.getElementsByTagName("a")].forEach(function (element) {
     element.addEventListener("click", () => {
       const navColumnarMenu = document.getElementById("nav-columnar-menu");
+      const navColumnarMenuBackground = document.getElementById(
+        "nav-columnar-menu-background"
+      );
       if (navColumnarMenu.classList.contains("active")) {
+        navColumnarMenuBackground.style.visibility="hidden";
+        navColumnarMenuBackground.classList.remove("active");
         removeActive(navColumnarMenu);
       }
       if (element.id === "show-nav-columnar-menu") {
+        navColumnarMenuBackground.style.visibility="visible";
+        navColumnarMenuBackground.classList.add("active");
         addActive(navColumnarMenu);
       }
     });
@@ -43,12 +46,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
     "touchstart",
     (ev) => {
       const navColumnarMenu = document.getElementById("nav-columnar-menu");
-      if (
-        ev.path.some(
-          (element) =>
-            element.classList?.contains("oscured")
-        )
-      ) {
+      const navColumnarMenuBackground = document.getElementById(
+        "nav-columnar-menu-background"
+      );
+      if (ev.path[0].id=='nav-columnar-menu-background') {
+        navColumnarMenuBackground.style.visibility="hidden";
+        navColumnarMenuBackground.classList.remove("active");
         removeActive(navColumnarMenu);
       }
     },