From 4d6ea433e62c9b1e0bc3cc685ed1e93b879f3191 Mon Sep 17 00:00:00 2001
From: NihadBadalov <32594553+NihadBadalov@users.noreply.github.com>
Date: Wed, 14 Feb 2024 22:51:06 +0100
Subject: [PATCH 1/3] Feat: Add background color change on hover to nav links

---
 src/layouts/Layout.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 61068183..56e35a6e 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -211,6 +211,10 @@ export default {
 @import "../assets/vars.scss";
 
 .nav-link {
+    &:hover {
+        background-color: rgba($primary, 0.2);
+    }
+
     &.status-page {
         background-color: rgba(255, 255, 255, 0.1);
     }

From 94154c49aabc22019ec814cea274226030ca6467 Mon Sep 17 00:00:00 2001
From: NihadBadalov <32594553+NihadBadalov@users.noreply.github.com>
Date: Thu, 15 Feb 2024 08:21:43 +0100
Subject: [PATCH 2/3] Feat: Change hover colors to shades of gray

---
 src/layouts/Layout.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 56e35a6e..94eaa731 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -212,7 +212,11 @@ export default {
 
 .nav-link {
     &:hover {
-        background-color: rgba($primary, 0.2);
+        background-color: rgba(0, 0, 0, 0.05);
+
+        .dark & {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
     }
 
     &.status-page {

From 17dfdacd933c62cbadc04d4afb473ce63b223c6d Mon Sep 17 00:00:00 2001
From: NihadBadalov <32594553+NihadBadalov@users.noreply.github.com>
Date: Tue, 20 Feb 2024 17:52:59 +0100
Subject: [PATCH 3/3] Fix: Correct colors

---
 src/layouts/Layout.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 94eaa731..9faedf58 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -212,10 +212,16 @@ export default {
 
 .nav-link {
     &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+        background-color: $primary;
+        color: #fff;
 
         .dark & {
-            background-color: rgba(255, 255, 255, 0.05);
+            background-color: $primary;
+            color: #000;
+        }
+
+        &.active {
+            background-color: $highlight;
         }
     }