From 80f2a47586678cad48faea18bac554def4e9e98b Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Mon, 30 Sep 2024 17:24:18 +0700
Subject: [PATCH] Add hover effect on sidebar items

---
 costapy-templates/prime/html/sidebar.html    | 2 +-
 costapy-templates/prime/static/css/style.css | 8 ++++++++
 html/index.html                              | 2 +-
 html/style.css                               | 8 ++++++++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/costapy-templates/prime/html/sidebar.html b/costapy-templates/prime/html/sidebar.html
index 664bcea..fb34781 100644
--- a/costapy-templates/prime/html/sidebar.html
+++ b/costapy-templates/prime/html/sidebar.html
@@ -1,5 +1,5 @@
 <!-- Sidebar -->
-<div class="sidebar p-3" id="sidebar">
+<div class="sidebar" id="sidebar">
     <!-- <h5>Sidebar</h5> -->
     <ul class="navbar-nav flex-column pb-5">
         % for item in menu:
diff --git a/costapy-templates/prime/static/css/style.css b/costapy-templates/prime/static/css/style.css
index ac3eae7..d9d681d 100644
--- a/costapy-templates/prime/static/css/style.css
+++ b/costapy-templates/prime/static/css/style.css
@@ -24,6 +24,14 @@ body {
     font-weight: bold;
 }
 
+.sidebar .navbar-nav .nav-item :hover {
+    background-color: rgba(0, 0, 0, 0.2); /* Darkens on hover */
+}
+
+.sidebar .navbar-nav .nav-item .nav-link {
+    padding-left: 20px;
+}
+
 .sidebar.minimized {
     transform: translateX(-100%);
 }
diff --git a/html/index.html b/html/index.html
index fdbc6b8..b57bac1 100644
--- a/html/index.html
+++ b/html/index.html
@@ -49,7 +49,7 @@
         </nav>
 
         <!-- Sidebar -->
-        <div class="sidebar p-3" id="sidebar">
+        <div class="sidebar" id="sidebar">
             <!-- <h5>Sidebar</h5> -->
             <ul class="navbar-nav flex-column pb-5">
                 <li class="nav-item">
diff --git a/html/style.css b/html/style.css
index ac3eae7..d9d681d 100644
--- a/html/style.css
+++ b/html/style.css
@@ -24,6 +24,14 @@ body {
     font-weight: bold;
 }
 
+.sidebar .navbar-nav .nav-item :hover {
+    background-color: rgba(0, 0, 0, 0.2); /* Darkens on hover */
+}
+
+.sidebar .navbar-nav .nav-item .nav-link {
+    padding-left: 20px;
+}
+
 .sidebar.minimized {
     transform: translateX(-100%);
 }