CostaPyTemplates/prime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bold a sidebar menu item when active

Browse Source
This commit is contained in:
Dita Aji Pratama 2024-09-30 17:19:45 +07:00
parent 721e811dc2
commit f6cdd3d9bb
4 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
costapy-templates/prime/html/sidebar.html
View File

@ -1,7 +1,7 @@
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar p-3" id="sidebar"> <div class="sidebar p-3" id="sidebar">
<!-- <h5>Sidebar</h5> --> <!-- <h5>Sidebar</h5> -->
<ul class="nav flex-column pb-5"> <ul class="navbar-nav flex-column pb-5">
% for item in menu: % for item in menu:
% if any(role in item['roles'] for role in user_roles): % if any(role in item['roles'] for role in user_roles):
<li class="nav-item"> <li class="nav-item">

4
costapy-templates/prime/static/css/style.css
View File

@ -20,6 +20,10 @@ body {
overflow-y: auto; /* Make sidebar scrollable */ overflow-y: auto; /* Make sidebar scrollable */
} }
.sidebar .navbar-nav .nav-item .active {
font-weight: bold;
}
.sidebar.minimized { .sidebar.minimized {
transform: translateX(-100%); transform: translateX(-100%);
} }

2
html/index.html
View File

@ -51,7 +51,7 @@
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar p-3" id="sidebar"> <div class="sidebar p-3" id="sidebar">
<!-- <h5>Sidebar</h5> --> <!-- <h5>Sidebar</h5> -->
<ul class="nav flex-column pb-5"> <ul class="navbar-nav flex-column pb-5">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="#"> <a class="nav-link text-white" href="#">
<i class="fa-solid fa-gauge me-3"></i> Dashboard <i class="fa-solid fa-gauge me-3"></i> Dashboard

4
html/style.css
View File

@ -20,6 +20,10 @@ body {
overflow-y: auto; /* Make sidebar scrollable */ overflow-y: auto; /* Make sidebar scrollable */
} }
.sidebar .navbar-nav .nav-item .active {
font-weight: bold;
}
.sidebar.minimized { .sidebar.minimized {
transform: translateX(-100%); transform: translateX(-100%);
} }