From 5b4c52992717b2b5b9bc5b22010d885c9e88ccd2 Mon Sep 17 00:00:00 2001
From: nsysean <76026698+nsysean@users.noreply.github.com>
Date: Mon, 10 Apr 2023 13:45:39 +0800
Subject: [PATCH] Fix: Navigation Bar (#377)

Co-authored-by: nsysean <nsysean@gmail.com>
---
 index.html |  4 ++--
 index.js   |  9 ++++-----
 styles.css | 37 +++++++++++++------------------------
 3 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 08026570..c6f048f1 100644
--- 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
index fff62f3b..b6bae3d7 100644
--- 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'
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index d8e09fcc..717bddad 100644
--- 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);