Fix: Navigation Bar (#377)

Co-authored-by: nsysean <[email protected]>
KendallDoesCoding · Apr 10, 2023 · 5b4c529 · 5b4c529
1 parent 001461c
commit 5b4c529
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -404,8 +404,8 @@
         <line id='line-3' x1="1.5" y1="13.5" x2="18.5" y2="13.5" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
         </svg>
       <svg id='open-menu-icon' width="35" height="auto" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <line id='line-4' x1="1.88879" y1="10.951" x2="16.6112" y2="2.45096" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
-          <line id='line-5' x1="2.38879" y1="2.45096" x2="17.1112" y2="10.951" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
+          <line id='line-4' x1="1.88879" y1="15.951" x2="16.6112" y2="2.45096" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
+          <line id='line-5' x1="2.38879" y1="2.45096" x2="17.1112" y2="15.951" stroke="#272B2E" stroke-width="3" stroke-linecap="round"/>
       </svg>                  
     </div>
     <div id='menu-display'>

diff --git a/index.js b/index.js
@@ -338,17 +338,16 @@ function clearTimeLeft() {
 
 // Function to display the menu
 function displayMenu(){
-  document.getElementById('menu-display').style.display = 'flex'
-  document.getElementById('menu-display').style.animationName = 'appear'
   document.getElementById('closed-menu-icon').style.display = 'none'
   document.getElementById('open-menu-icon').style.display = 'block'
+  document.getElementById('menu-display').style.opacity = '1'
+  document.getElementById('menu-display').style.left = '0'
 }
 
 // Function to close the menu
 function closeMenu(){
-  document.getElementById('menu-display').style.animationName = 'desappear'
   document.getElementById('closed-menu-icon').style.display = 'block'
   document.getElementById('open-menu-icon').style.display = 'none'
-  const displayToNone = () => document.getElementById('menu-display').style.display = 'none'
-  setTimeout(displayToNone, 1000)
+  document.getElementById('menu-display').style.opacity = '0'
+  document.getElementById('menu-display').style.left = '-25vw'
 }
diff --git a/styles.css b/styles.css
@@ -1042,31 +1042,15 @@ main section {
   font-size: 20px;
 }
 
-@keyframes appear {
-  from {
-    left: -25vw;
-    opacity: 0;
-  }
-  to {
-    left: 0;
-    opacity: 1;
-  }
-}
-@keyframes desappear {
-  from {
-    left: 0;
-    opacity: 1;
-  }
-  to {
-    left: -25vw;
-    opacity: 0;
-  }
+#menu {
+  z-index: 11;
 }
+
 #menu-display {
-  display: none;
+  display: flex;
   bottom: 0;
-  left: 0;
-  height: 90vh;
+  left: -25vw;
+  height: 100vh;
   width: 25vw;
   min-width: fit-content;
   background: var(--bg-color-menu);
@@ -1081,10 +1065,12 @@ main section {
   font-size: 20px;
   font-weight: 500;
   padding: 1.5% 1%;
-  animation-duration: 1s;
+  transition: all 1s;
 }
 
-
+#menu-display a[href="/lyrics"] {
+  padding-top: 10vh;
+}
 
 #menu-display a{
   text-decoration: none;
@@ -1099,9 +1085,12 @@ main section {
 }
 #closed-menu-icon {
   display: block;
+  cursor: pointer;
 }
 #open-menu-icon {
   display: none;
+  margin-top: -5px;
+  cursor: pointer;
 }
 .lud {
   color: var(--bg-color);