Add hover effect on sidebar items

This commit is contained in:
Dita Aji Pratama 2024-09-30 17:24:18 +07:00
parent f6cdd3d9bb
commit 80f2a47586
4 changed files with 18 additions and 2 deletions

View File

@ -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:

View File

@ -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%);
}

View File

@ -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">

View File

@ -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%);
}