Merge pull request #5 from CarlosJorgeR/feature/createColumnarNavbar

carlosjorger · web-flow · commit 189afb018116 · 2022-11-28T21:47:20.000-05:00
Feature/create columnar navbar
diff --git a/css/navbar.css b/css/navbar.css
@@ -1,36 +1,98 @@
+.navbar-uncompressed {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+  background-color: rgba(9, 3, 15, 0.9);
+}
+
 .navbar {
-    padding: 0.5em;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 0;
+  padding: 0.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0;
 }
 
 #home {
-    padding: 1em;
-    align-self: center;
+  padding: 1em;
+  align-self: center;
 }
 
 .nav-link {
-    padding: 1em;
-    color: var(--default-font-color);
-    text-decoration: none;
-    /* background-image:none; */
-    transition: all 0.5s ease-in-out;
-
+  padding: 1em;
+  color: var(--default-font-color);
+  text-decoration: none;
+  transition: all 0.5s ease-in-out;
 }
 
 .nav-link:hover {
-    background-color: rgb(36, 28, 45);
-    color: var(--default-secundary-font-color) !important
+  background-color: rgb(36, 28, 45);
+  color: var(--default-secundary-font-color) !important;
 }
 
 .nav-link:visited {
-    color: var(--default-font-color);
-    text-decoration: none;
-    background-image: none;
+  color: var(--default-font-color);
+  text-decoration: none;
+  background-image: none;
 }
 
-.navbar>li {
-    align-self: center;
-}
+.navbar > li {
+  align-self: center;
+}
+
+.navbar-compressed {
+  display: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+  background-color: rgb(38, 26, 50);
+}
+
+.nav-header-menu {
+  position: absolute;
+  padding: 1em;
+  z-index: 2;
+  width: 100%;
+  background-color: rgb(38, 26, 50);
+}
+
+#nav-columnar-menu {
+  position: absolute;
+  padding: 0em;
+  margin-top: 0;
+  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 {
+  transition: all 0.8s ease-in;
+  width: 60%;
+  left: 0;
+
+  height: 100vh;
+}
+
+.nav-element {
+  text-align: left;
+  padding: 0.5em;
+  transition: all 0.5s ease-in-out;
+}
+
+.nav-element:hover {
+  background-color: rgb(36, 28, 45);
+}
+
+.nav-link.compressed {
+  padding: 0;
+}
+.nav-link-label{
+    padding-left: 2em;
+}
diff --git a/css/styles.css b/css/styles.css
@@ -13,7 +13,10 @@ body {
   margin: 0;
 }
 
-/* elements */
+main {
+  transition: all 0.8s ease-in;
+}
+
 p {
   color: var(--default-font-color);
   font-family: var(--default-font-family);
@@ -25,9 +28,6 @@ p {
 h1,
 h2,
 h3 {
-  /* for guide */
-  /* border: solid 3px aqua; */
-
   font-family: 'Raleway', sans-serif !important;
 }
 
@@ -45,6 +45,11 @@ section {
 
 }
 
+.opacity-effect {
+  filter: opacity(50%);
+  -webkit-filter:  opacity(50%) ;
+  /* backdrop-filter: opacity(20%) grayscale(70%); */
+}
 
 
 article {
@@ -67,14 +72,6 @@ i {
   color: var(--default-secundary-font-color);
 }
 
-nav {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 9999;
-  background-color: rgba(9, 3, 15, 0.9);
-
-}
 
 /* || UTILITIES */
 
@@ -103,7 +100,8 @@ nav {
   font-size: 2rem;
 
 }
-.centered-article{
+
+.centered-article {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -232,6 +230,14 @@ nav {
     max-width: 85%;
   }
 
+  .navbar {
+    display: none !important;
+  }
+
+  .navbar-compressed {
+    display: block !important;
+  }
+
   section,
   footer {
     width: 83%;
@@ -247,6 +253,14 @@ nav {
     font-size: 10px;
   }
 
+  .navbar {
+    display: none !important;
+  }
+
+  .navbar-compressed {
+    display: block !important;
+  }
+
   p {
     max-width: 90%;
   }
diff --git a/images/demo.jpg b/images/demo.jpg
diff --git a/images/demo2.jpg b/images/demo2.jpg
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@
 
 <body>
   <header>
-    <nav>
+    <nav class="navbar-uncompressed">
       <ul class="navbar">
         <li id="home"> <a href="#" class="icon-link"><i class="fa fa-house fa-lg"></i></a></li>
         <li>
@@ -51,7 +51,28 @@
         </li>
       </ul>
     </nav>
+    <nav class="navbar-compressed">
+      <div class="nav-header-menu">
+        <a class="icon-link" id="show-nav-columnar-menu"><i class="fa fa-bars fa-xl"></i></a>
+      </div>
+      <ul id="nav-columnar-menu">
+        <li class="nav-element">
+          <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 class="nav-link-label">About me</h1></a>
+        </li>
+        <li class="nav-element">
+          <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 class="nav-link-label">Contact</h1></a>
+        </li>
+
+      </ul>
+    </nav>
   </header>
+ <main>
   <section>
     <div class="presentation centered-article">
       <h1 id="presentation-title">Hi, I am <br class='br-show'>Carlos Jorge!</h1>
@@ -135,8 +156,8 @@ <h1 class="subtitle contacts-item">Contact</h1>
         </p>
       </div>
     </div>
-
   </footer>
+ </main>
 </body>
 
 </html>
diff --git a/index.js b/index.js
@@ -13,4 +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', ()=>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);
+})
