add touch event to quit the navbar

Author: carlosjorger

css/navbar.css

@@ -60,14 +60,16 @@
 
 #nav-columnar-menu {
   position: absolute;
+  padding: 0em;
   margin-top: 0;
-  padding:2em;
   background-color: rgb(38, 26, 50);
   width: 60%;
   z-index: 3;
   left: -100vw;
   list-style-type: none;  
   transition: all 0.3s ease-in;
+  height: 100vh;
+
 }
 
 #nav-columnar-menu.active {
@@ -91,3 +93,6 @@
 .nav-link.compressed {
   padding: 0;
 }
+.nav-link-label{
+    padding-left: 2em;
+}

index.html

@@ -57,16 +57,16 @@
       </div>
       <ul id="nav-columnar-menu">
         <li class="nav-element">
-          <a class="nav-link compressed" href="#"><h1>Home</h1></a>
+          <a class="nav-link compressed" href="#"><h1 class="nav-link-label">Home</h1></a>
         </li>
         <li class="nav-element">
-          <a class="nav-link compressed" href="#aboutMe"><h1>About me</h1></a>
+          <a class="nav-link compressed" href="#aboutMe"><h1 class="nav-link-label">About me</h1></a>
         </li>
         <li class="nav-element">
-          <a class="nav-link compressed" href="#work"><h1>Work</h1></a>
+          <a class="nav-link compressed" href="#work"><h1 class="nav-link-label">Work</h1></a>
         </li>
         <li class="nav-element">
-          <a class="nav-link compressed" href="#contact"><h1>Contact</h1></a>
+          <a class="nav-link compressed" href="#contact"><h1 class="nav-link-label">Contact</h1></a>
         </li>
 
       </ul>

index.js

@@ -13,25 +13,35 @@ function reveal() {
     }
   })
 }
-window.addEventListener("scroll", reveal)
+window.addEventListener("scroll", reveal);
+
+function activeNav(element){
+  const navColumnarMenu = document.getElementById('nav-columnar-menu');
+  if (navColumnarMenu.classList.contains('active')) {
+    navColumnarMenu.classList.remove("active");
+    document.getElementsByTagName("main")[0].classList.remove('opacity-effect')
+    document.getElementsByClassName("nav-header-menu")[0].classList.remove('opacity-effect')
+  }
+  else if(element.id==='show-nav-columnar-menu'){
+    navColumnarMenu.classList.add("active");
+    document.getElementsByTagName("main")[0].classList.add('opacity-effect')
+    document.getElementsByClassName("nav-header-menu")[0].classList.add('opacity-effect')
+    // document.getElementsByClassName("nav-header-menu")[0].
+  }
+
+}
 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");
-          document.getElementsByTagName("main")[0].classList.remove('opacity-effect')
-          document.getElementsByClassName("nav-header-menu")[0].classList.remove('opacity-effect')
-        }
-        else if(element.id==='show-nav-columnar-menu'){
-          navColumnarMenu.classList.add("active");
-          document.getElementsByTagName("main")[0].classList.add('opacity-effect')
-          document.getElementsByClassName("nav-header-menu")[0].classList.add('opacity-effect')
-
-        }
-
-      })
+      element.addEventListener('click', ()=>activeNav(element))
     }
   )
+  document.addEventListener('touchstart', (ev) => {
+    if(ev.path.some(element=>(element.tagName==='MAIN'||element.classList?.contains('nav-header-menu')))){
+      const navColumnarMenu = document.getElementById("nav-columnar-menu");
+      navColumnarMenu.classList.remove("active");
+      document.getElementsByTagName("main")[0].classList.remove('opacity-effect')
+      document.getElementsByClassName("nav-header-menu")[0].classList.remove('opacity-effect')
+    }
+  }, false);
 })