aji/authsquare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hover effect on sidebar items

Browse Source
This commit is contained in:
Dita Aji Pratama 2024-09-28 14:07:32 +07:00
parent e2a90cc4dc
commit d23f3357e3
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/prime/html/sidebar.html
View File

@ -1,5 +1,5 @@
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar p-3" id="sidebar"> <div class="sidebar" id="sidebar">
<!-- <h5>Sidebar</h5> --> <!-- <h5>Sidebar</h5> -->
<ul class="navbar-nav flex-column pb-5"> <ul class="navbar-nav flex-column pb-5">
% for item in menu: % for item in menu:

8
app/templates/prime/static/css/style.css
View File

@ -24,6 +24,14 @@ body {
font-weight: bold; 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 { .sidebar.minimized {
transform: translateX(-100%); transform: translateX(-100%);
} }