From cee20fb7e0f2d66f56c6be31a764998faba2388a Mon Sep 17 00:00:00 2001
From: WinsDominoes <winsdominoes2018@gmail.com>
Date: Wed, 8 May 2024 15:20:35 +0700
Subject: [PATCH] update responsive navbar

---
 assets/css/style.css | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index ad5e794..a962587 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -89,25 +89,28 @@ header {
 .nav > .nav-list {
     display: flex;
     margin: 0 1rem 0 auto;
-    gap: 2rem;
+    gap: 0.5rem;
     padding-left: 0;
 }
 
 .nav > .nav-list > a {
     text-decoration: none;
     cursor: pointer;
+    width: 80px;
+    text-align: center;
+    border-radius: 7px;
+    padding: 0.5rem 0 0.5rem 0;
+}
+
+.nav > .nav-list > a:hover {
+    background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
+    
 }
 
 .nav > .nav-list > a > li {
     list-style-type: none;
 }
 
-.nav > .nav-list > a > li:hover {
-    background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
-    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
-    border-radius: 7px;
-}
-
 .nav > #nav-check {
     display: none;
 }
@@ -146,7 +149,7 @@ header {
         position: fixed;
         display: flex;
         flex-direction: column;
-        gap: 0;
+        gap: 0.25rem;
         width: 100%;
         height: 0;
         transition: all 0.3s ease-in;
@@ -156,13 +159,13 @@ header {
         background-color: light-dark(var(--light-nav-bg-color), var(--dark-nav-bg-color));
     }
 
-    .nav > .nav-list > a > li {
+    .nav > .nav-list > a {
+        width: 100%;
+        text-align: start;
         padding: 0.5rem 0.75rem 0.5rem 0.75rem;
-        margin-bottom: 0.35rem;
-        border-radius: 7px;
     }
 
-    .nav > .nav-list > a > li:hover {
+    .nav > .nav-list > a:hover {
         background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
     }