Fixed monile navbar and added closing function

MessageSilo · Feb 21, 2024 · 0543be2 · 0543be2
1 parent fc3f328
commit 0543be2
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -114,10 +114,10 @@
             src="./img/logo.png"
             alt="Message Silo logo"
           />
-          <li><a class="menu-link" href="#home">Home</a></li>
-          <li><a class="menu-link" href="#why">Why</a></li>
-          <li><a class="menu-link" href="#features">Features</a></li>
-          <li><a class="menu-link" href="#api">Find Us</a></li>
+          <li><a onclick="closeMobileNav()" class="menu-link" href="#home">Home</a></li>
+          <li><a onclick="closeMobileNav()" class="menu-link" href="#why">Why</a></li>
+          <li><a onclick="closeMobileNav()" class="menu-link" href="#features">Features</a></li>
+          <li><a onclick="closeMobileNav()" class="menu-link" href="#api">Find Us</a></li>
         </ul>
       </nav>
     </header>
@@ -270,7 +270,7 @@ <h2 class="header--primary">
           />
         </div>
       </section>
-      
+
       <section class="github">
         <div class="github-banner">
           <h2 class="header--primary">

diff --git a/nav.js b/nav.js
@@ -9,37 +9,52 @@ navToggle.addEventListener('click', function() {
   const visibility = primaryNav.getAttribute('data-visible');
 
     if (visibility === 'false') {
-        primaryNav.setAttribute('data-visible', 'true');
-        navToggle.setAttribute('aria-expanded', 'true');
-        header.classList.remove("scrolled");   
-        navLogo.classList.add("u-hidden");   
-        mobilNavLogo.classList.remove("u-hidden");  
+      openMobileNav();
     }else if(visibility === 'true'){
-        primaryNav.setAttribute('data-visible', 'false');
-        navToggle.setAttribute('aria-expanded', 'false');
-        setTimeout(()=>{navLogo.classList.remove("u-hidden");}, 300); 
-        mobilNavLogo.classList.add("u-hidden");  
-        if(window.scrollY > 0){
-          setTimeout(()=>{header.classList.add("scrolled");}, 300);}
+      closeMobileNav();
 
     }else{
         throw new Error('Unexpected value for data-visible attribute');
     }
 
 });
 
+// Close Mobile Nav
+function closeMobileNav(){
+  primaryNav.setAttribute('data-visible', 'false');
+  navToggle.setAttribute('aria-expanded', 'false');
+  setTimeout(()=>{navLogo.classList.remove("u-hidden");}, 300); 
+  mobilNavLogo.classList.add("u-hidden");  
+  if(window.scrollY > 0){
+    setTimeout(()=>{header.classList.add("scrolled");}, 300);}
+}
+
+function openMobileNav(){
+  primaryNav.setAttribute('data-visible', 'true');
+  navToggle.setAttribute('aria-expanded', 'true');
+  header.classList.remove("scrolled");   
+  navLogo.classList.add("u-hidden");   
+  mobilNavLogo.classList.remove("u-hidden");  
+}
+
+
+
+
+
 document.addEventListener("scroll", ()=>{
 
   const visibility = primaryNav.getAttribute('data-visible');
+
   if(visibility === 'false'){
     if(window.scrollY > 0){
-      header.classList.add("scrolled");
+      setTimeout(() => {
+        header.classList.add("scrolled");
+      }, 400);
     }else{
       header.classList.remove("scrolled");
     }
   }
-}
-)
+});
 
 // Resize Animation Bug Fix
 let resizeTimer;