From 07d84996dd797f7ffefcb431350c799799db4005 Mon Sep 17 00:00:00 2001
From: MrGamz <123112118+MrGamzWasTaken@users.noreply.github.com>
Date: Sat, 29 Apr 2023 20:22:14 -0400
Subject: [PATCH] Added NavBar... Thats It

---
 app.js     |  7 +++++++
 index.html |  1 +
 styles.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+)

diff --git a/app.js b/app.js
index e69de29..2d599de 100644
--- a/app.js
+++ b/app.js
@@ -0,0 +1,7 @@
+const menu = document.querySelector('#mobile-menu');
+const menuLinks = document.querySelector('.navbar__menu');
+
+menu.addEventListener('click', function() {
+    menu.classList.toggle('is-active');
+    menuLinks.classList.toggle('active');
+})
\ No newline at end of file
diff --git a/index.html b/index.html
index a80469a..c6ed546 100644
--- a/index.html
+++ b/index.html
@@ -32,5 +32,6 @@
             </ul>
         </div>
     </nav>
+    <script src="app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 8a1dff4..dfaa0fa 100644
--- a/styles.css
+++ b/styles.css
@@ -123,6 +123,7 @@
         transition: all 0.5s ease;
         height: 50vh;
         z-index: -1;
+        background: #131313;
     }
 
     .navbar__menu.active {
@@ -135,4 +136,60 @@
         font-size: 1.6rem;
     }
 
+    #navbar__logo {
+        padding-left: 25px;
+    }
+
+    .navbar__toggle .bar {
+        width: 25px;
+        height: 3px;
+        margin: 5px auto;
+        transition: all 0.5s ease-in-out;
+        background: #fff;  
+    }
+
+    .navbar__item {
+        width: 100%;
+    }
+
+    .navbar__links {
+        text-align: center;
+        padding: 2rem;
+        width: 100%;
+        display: table;
+    }
+
+    #mobile-menu {
+        position: absolute;
+        top: 20%;
+        right: 5%;
+        transform: translate(5%, 20%);
+    }
+
+    .navbar__btn {
+    padding-bottom: 2rem;
+    }
+
+    .button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 80%;
+        height: 80px;
+        margin: 0;
+    }
+
+    .navbar__toggle .bar {
+        display: block;
+        cursor: pointer;
+    }
+
+    #mobile-menu.is-active .bar:nth-child(2) {
+        opacity: 0;
+    }
+    
+    #mobile-menu.is-active .bar:nth-child(1) {
+        transform: translateY(-8px) rotate(-45deg);
+    }
+
 }