create events to open and close the nav-columnar-menu

Author: carlosjorger

css/navbar.css

@@ -26,7 +26,7 @@
     color: var(--default-font-color);
     text-decoration: none;
     transition: all 0.5s ease-in-out;
-    
+
 }
 
 .nav-link:hover {
@@ -48,20 +48,37 @@
     display: none;
     position: fixed;
     top: 0;
-    width:100%;
-    z-index: 9999;
+    width: 100%;
+    z-index: 2;
     background-color: rgb(38, 26, 50);
 
 }
 
 .nav-header-menu {
+    position: absolute;
     padding: 0.5em;
+    z-index: 3;
+    width: 100%;
+    background-color: rgb(38, 26, 50);
 }
 
-.nav-menu {
+#nav-columnar-menu {
+    position: absolute;
     margin-top: 0;
     padding-left: 0;
-    height: 70vh;
+    height: 50vh;
+    background-color: rgb(38, 26, 50);
+    width: 100%;
+    z-index: 2;
+    top: -50vh;
+    transition: all 0.3s ease-in;
+
+}
+
+#nav-columnar-menu.active {
+    top: 1em;
+    transition: all 0.8s ease-in;
+
 }
 
 .nav-element {

index.html

@@ -53,9 +53,9 @@
     </nav>
     <nav class="navbar-compressed">
       <div class="nav-header-menu">
-        <a href="#" class="icon-link"><i class="fa fa-bars fa-lg"></i></a>
+        <a class="icon-link" id="show-nav-columnar-menu"><i class="fa fa-bars fa-lg"></i></a>
       </div>
-      <ul class="nav-menu">
+      <ul id="nav-columnar-menu">
         <li class="nav-element">
           <a class="nav-link compressed" href="#"><h2>Home</h2></a>
         </li>

index.js

@@ -13,4 +13,31 @@ function reveal() {
     }
   })
 }
-window.addEventListener("scroll", reveal)
+window.addEventListener("scroll", reveal)
+document.addEventListener("DOMContentLoaded", function (event) {
+  [...document.getElementsByTagName("a")].forEach(
+    function (element) {
+      element.addEventListener('click', function () {
+        const navColumnarMenu = document.getElementById('nav-columnar-menu');
+        if (navColumnarMenu.classList.contains('active')) {
+          navColumnarMenu.classList.remove("active");
+        }
+        else if(element.id==='show-nav-columnar-menu'){
+          navColumnarMenu.classList.add("active");
+        }
+
+      })
+    }
+  )
+  // Your code to run since DOM is loaded and ready
+})
+// ([...document.getElementsByTagName('a')]).forEach(
+//     // (a)=>{
+
+//     // }
+//     // (element=>{
+//     //   element.addEventListener('click',function(){
+//     //     console.log('aaaaaaaaa')
+//     //   })
+//     // })
+// )