banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: change styling menu & add space between menu

main
Yuri Dimas 2025-12-17 11:53:57 +07:00
parent 405af63b47
commit 29a13183a0
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
2 changed files with 64 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
Views/Shared/_SidebarUnified.cshtml
View File

@ -21,36 +21,36 @@
<!-- Sidebar content here --> <!-- Sidebar content here -->
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
<ul class="menu menu-sidebar bg-base-100 text-base-content min-h-full w-full overscroll-y-none p-4"> <ul class="menu menu-sidebar bg-base-100 text-base-content min-h-full w-full overscroll-y-none p-4 space-y-2">
<!-- Dashboard --> <!-- Dashboard -->
<li> <li>
<a asp-controller="Dashboard" asp-action="Index" class="w-full rounded-full @(controller == "Dashboard" ? "menu-active" : "")"> <a asp-controller="Dashboard" asp-action="Index" class="@(controller == "Dashboard" ? "menu-active" : "")">
<i class="ph ph-gauge me-2 text-lg"></i> <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
Dashboard Dashboard
</a> </a>
</li> </li>
<!-- Dashboard Nasabah --> <!-- Dashboard Nasabah -->
<li> <li>
<a asp-controller="DashboardNasabah" asp-action="Index" class="w-full rounded-full @(controller == "DashboardNasabah" ? "menu-active" : "")"> <a asp-controller="DashboardNasabah" asp-action="Index" class="@(controller == "DashboardNasabah" ? "menu-active" : "")">
<i class="ph ph-gauge me-2 text-lg"></i> <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
Dashboard Nasabah Dashboard Nasabah
</a> </a>
</li> </li>
<!-- Dashboard BSU --> <!-- Dashboard BSU -->
<li> <li>
<a asp-controller="DashboardBsu" asp-action="Index" class="w-full rounded-full @(controller == "DashboardBsu" ? "menu-active" : "")"> <a asp-controller="DashboardBsu" asp-action="Index" class="@(controller == "DashboardBsu" ? "menu-active" : "")">
<i class="ph ph-gauge me-2 text-lg"></i> <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
Dashboard BSU Dashboard BSU
</a> </a>
</li> </li>
<!-- Dashboard BSI --> <!-- Dashboard BSI -->
<li> <li>
<a asp-controller="DashboardBsi" asp-action="Index" class="w-full rounded-full @(controller == "DashboardBsi" ? "menu-active" : "")"> <a asp-controller="DashboardBsi" asp-action="Index" class="@(controller == "DashboardBsi" ? "menu-active" : "")">
<i class="ph ph-gauge me-2 text-lg"></i> <i class="ph ph-gauge me-2 text-lg text-gray-400"></i>
Dashboard BSI Dashboard BSI
</a> </a>
</li> </li>
@ -58,16 +58,16 @@
<!-- Data Bank Sampah --> <!-- Data Bank Sampah -->
<li> <li>
<a asp-controller="DataBankSampah" asp-action="Index" class="rounded-full @(controller == "DataBankSampah" ? "menu-active" : "")"> <a asp-controller="DataBankSampah" asp-action="Index" class="@(controller == "DataBankSampah" ? "menu-active" : "")">
<i class="ph ph-house-line me-2 text-lg"></i> <i class="ph ph-house-line me-2 text-lg text-gray-400"></i>
Data Bank Sampah Data Bank Sampah
</a> </a>
</li> </li>
<!-- Data Nasabah --> <!-- Data Nasabah -->
<li> <li>
<a asp-controller="DataNasabah" asp-action="Index" class="rounded-full @(controller == "DataNasabah" ? "menu-active" : "")"> <a asp-controller="DataNasabah" asp-action="Index" class="@(controller == "DataNasabah" ? "menu-active" : "")">
<i class="ph ph-users-four me-2 text-lg"></i> <i class="ph ph-users-four me-2 text-lg text-gray-400"></i>
Data Nasabah Data Nasabah
</a> </a>
</li> </li>
@ -76,7 +76,7 @@
<li> <li>
<details @(module == "Data" && new[] { "Nasabah", "BankSampahInduk", "BankSampahUnit", "Aktivitas", "HargaSampah", "Offtaker", "PotensiRumah" }.Contains(controller) ? "open" : "")> <details @(module == "Data" && new[] { "Nasabah", "BankSampahInduk", "BankSampahUnit", "Aktivitas", "HargaSampah", "Offtaker", "PotensiRumah" }.Contains(controller) ? "open" : "")>
<summary> <summary>
<i class="ph ph-database me-2 text-lg"></i> <i class="ph ph-database me-2 text-lg text-gray-400"></i>
Data Data
</summary> </summary>
<ul> <ul>
@ -95,7 +95,7 @@
<li> <li>
<details @(module == "Transaksi" && new[] { "Nasabah", "PenarikanTabungan", "Bsi", "TransaksiOfftaker", "LaporanTransaksi", "SedekahSampah" }.Contains(controller) ? "open" : "")> <details @(module == "Transaksi" && new[] { "Nasabah", "PenarikanTabungan", "Bsi", "TransaksiOfftaker", "LaporanTransaksi", "SedekahSampah" }.Contains(controller) ? "open" : "")>
<summary> <summary>
<i class="ph ph-cash-register me-2 text-lg"></i> <i class="ph ph-cash-register me-2 text-lg text-gray-400"></i>
Transaksi Transaksi
</summary> </summary>
<ul> <ul>
@ -109,27 +109,26 @@
</details> </details>
</li> </li>
<!-- Data Offtaker --> <!-- Data Offtaker -->
<li> <li>
<a asp-controller="DataOfftaker" asp-action="Index" class="rounded-full @(controller == "DataOfftaker" ? "menu-active" : "")"> <a asp-controller="DataOfftaker" asp-action="Index" class="@(controller == "DataOfftaker" ? "menu-active" : "")">
<i class="ph ph-read-cv-logo me-2 text-lg"></i> <i class="ph ph-read-cv-logo me-2 text-lg text-gray-400"></i>
Data Offtaker Data Offtaker
</a> </a>
</li> </li>
<!-- Data Kelurahan --> <!-- Data Kelurahan -->
<li> <li>
<a asp-controller="DataKelurahan" asp-action="Index" class="rounded-full @(controller == "DataKelurahan" ? "menu-active" : "")"> <a asp-controller="DataKelurahan" asp-action="Index" class="@(controller == "DataKelurahan" ? "menu-active" : "")">
<i class="ph ph-buildings me-2 text-lg"></i> <i class="ph ph-buildings me-2 text-lg text-gray-400"></i>
Data Kelurahan Data Kelurahan
</a> </a>
</li> </li>
<!-- Transaksi Laporan --> <!-- Transaksi Laporan -->
<li> <li>
<a asp-controller="TransaksiLaporan" asp-action="Index" class="rounded-full @(controller == "TransaksiLaporan" ? "menu-active" : "")"> <a asp-controller="TransaksiLaporan" asp-action="Index" class="@(controller == "TransaksiLaporan" ? "menu-active" : "")">
<i class="ph ph-database me-2 text-lg"></i> <i class="ph ph-database me-2 text-lg text-gray-400"></i>
Transaksi Laporan Transaksi Laporan
</a> </a>
</li> </li>
@ -138,7 +137,7 @@
<li> <li>
<details @(module == "Wilayah" && new[] { "Kota", "Kecamatan", "Kelurahan" }.Contains(controller) ? "open" : "")> <details @(module == "Wilayah" && new[] { "Kota", "Kecamatan", "Kelurahan" }.Contains(controller) ? "open" : "")>
<summary> <summary>
<i class="ph ph-map-trifold me-2 text-lg"></i> <i class="ph ph-map-trifold me-2 text-lg text-gray-400"></i>
Wilayah Wilayah
</summary> </summary>
<ul> <ul>
@ -153,7 +152,7 @@
<li> <li>
<details @(module == "Master" && new[] { "Aktivitas", "Artikel", "Pendamping","BadanHukum", "Fasilitas", "JenisBankSampah", "JenisNasabah", "JenisPengolahan", "Kategori", "KategoriFasilitas", "Mitra", "StatusLahan", "JenisSampah", "KategoriSampah", "SubKategoriSampah", "Lokasi" }.Contains(controller) ? "open" : "")> <details @(module == "Master" && new[] { "Aktivitas", "Artikel", "Pendamping","BadanHukum", "Fasilitas", "JenisBankSampah", "JenisNasabah", "JenisPengolahan", "Kategori", "KategoriFasilitas", "Mitra", "StatusLahan", "JenisSampah", "KategoriSampah", "SubKategoriSampah", "Lokasi" }.Contains(controller) ? "open" : "")>
<summary> <summary>
<i class="ph ph-database me-2 text-lg"></i> <i class="ph ph-database me-2 text-lg text-gray-400"></i>
Master Data Master Data
</summary> </summary>
<ul> <ul>
@ -179,35 +178,35 @@
<!-- CMS --> <!-- CMS -->
<li> <li>
<a asp-controller="Cms" class="rounded-full @(controller == "Cms" ? "menu-active" : "")"> <a asp-controller="Cms" class="@(controller == "Cms" ? "menu-active" : "")">
<i class="ph ph-newspaper me-2 text-lg"></i> <i class="ph ph-newspaper me-2 text-lg text-gray-400"></i>
CMS CMS
</a> </a>
</li> </li>
<!-- Reduksi --> <!-- Reduksi -->
<li> <li>
<a asp-controller="ReduksiSampahDinas" class="rounded-full @(controller == "ReduksiSampahDinas" ? "menu-active" : "")"> <a asp-controller="ReduksiSampahDinas" class="@(controller == "ReduksiSampahDinas" ? "menu-active" : "")">
<i class="ph ph-database me-2 text-lg"></i> <i class="ph ph-database me-2 text-lg text-gray-400"></i>
Reduksi Sampah Dinas Reduksi Sampah Dinas
</a> </a>
</li> </li>
<li> <li>
<a asp-controller="ReduksiSampahSatpel" class="rounded-full @(controller == "ReduksiSampahSatpel" ? "menu-active" : "")"> <a asp-controller="ReduksiSampahSatpel" class="@(controller == "ReduksiSampahSatpel" ? "menu-active" : "")">
<i class="ph ph-database me-2 text-lg"></i> <i class="ph ph-database me-2 text-lg text-gray-400"></i>
Reduksi Sampah Satpel Reduksi Sampah Satpel
</a> </a>
</li> </li>
<li> <li>
<a asp-controller="ReduksiSampahSudin" class="rounded-full @(controller == "ReduksiSampahSudin" ? "menu-active" : "")"> <a asp-controller="ReduksiSampahSudin" class="@(controller == "ReduksiSampahSudin" ? "menu-active" : "")">
<i class="ph ph-database me-2 text-lg"></i> <i class="ph ph-database me-2 text-lg text-gray-400"></i>
Reduksi Sampah Sudin Reduksi Sampah Sudin
</a> </a>
</li> </li>
<!-- <li> <!-- <li>
<details @(new[] { "Maggot", "Composting", "ReduksiSampah", "BankSampah" }.Contains(controller) ? "open" : "")> <details @(new[] { "Maggot", "Composting", "ReduksiSampah", "BankSampah" }.Contains(controller) ? "open" : "")>
<summary> <summary>
<i class="ph ph-database me-2 text-lg"></i> <i class="ph ph-database me-2 text-lg text-gray-400"></i>
Reduksi Reduksi
</summary> </summary>
<ul> <ul>
@ -221,48 +220,48 @@
<!-- Ganti Password --> <!-- Ganti Password -->
<li> <li>
<a href="https://akun.dinaslhdki.id/" target="_blank" class="rounded-full"> <a href="https://akun.dinaslhdki.id/" target="_blank">
<i class="ph ph-lock-key me-2 text-lg"></i> <i class="ph ph-lock-key me-2 text-lg text-gray-400"></i>
Ganti Password Ganti Password
</a> </a>
</li> </li>
<!-- Profil --> <!-- Profil -->
<li> <li>
<a asp-controller="Profil" class="rounded-full @(controller == "Profil" ? "menu-active" : "")"> <a asp-controller="Profil" class="@(controller == "Profil" ? "menu-active" : "")">
<i class="ph ph-user-square me-2 text-lg"></i> <i class="ph ph-user-square me-2 text-lg text-gray-400"></i>
Profil Bank Sampah Profil Bank Sampah
</a> </a>
</li> </li>
<!-- Aktifitas --> <!-- Aktifitas -->
<li> <li>
<a asp-controller="Aktifitas" class="rounded-full @(controller == "Aktifitas" ? "menu-active" : "")"> <a asp-controller="Aktifitas" class="@(controller == "Aktifitas" ? "menu-active" : "")">
<i class="ph ph-activity me-2 text-lg"></i> <i class="ph ph-activity me-2 text-lg text-gray-400"></i>
Aktifitas Aktifitas
</a> </a>
</li> </li>
<!-- Nasabah --> <!-- Nasabah -->
<li> <li>
<a asp-controller="ProfilNasabah" asp-action="Index" class="rounded-full @(controller == "ProfilNasabah" ? "menu-active" : "")"> <a asp-controller="ProfilNasabah" asp-action="Index" class="@(controller == "ProfilNasabah" ? "menu-active" : "")">
<i class="ph ph-user-circle me-2 text-lg"></i> <i class="ph ph-user-circle me-2 text-lg text-gray-400"></i>
Profil Nasabah Profil Nasabah
</a> </a>
</li> </li>
<!-- Bank Sampah Nasabah --> <!-- Bank Sampah Nasabah -->
<li> <li>
<a asp-controller="BankSampahNasabah" asp-action="Index" class="rounded-full @(controller == "BankSampahNasabah" ? "menu-active" : "")"> <a asp-controller="BankSampahNasabah" asp-action="Index" class="@(controller == "BankSampahNasabah" ? "menu-active" : "")">
<i class="ph ph-bank me-2 text-lg"></i> <i class="ph ph-bank me-2 text-lg text-gray-400"></i>
Bank Sampah Nasabah Bank Sampah Nasabah
</a> </a>
</li> </li>
<!-- Transaksi Nasabah --> <!-- Transaksi Nasabah -->
<li> <li>
<a asp-controller="TransaksiNasabah" asp-action="Index" class="rounded-full @(controller == "TransaksiNasabah" ? "menu-active" : "")"> <a asp-controller="TransaksiNasabah" asp-action="Index" class="@(controller == "TransaksiNasabah" ? "menu-active" : "")">
<i class="ph ph-currency-circle-dollar me-2 text-lg"></i> <i class="ph ph-currency-circle-dollar me-2 text-lg text-gray-400"></i>
Transaksi Nasabah Transaksi Nasabah
</a> </a>
</li> </li>
@ -274,7 +273,7 @@
<div class="card w-fit bg-linear-to-tl from-[#FFDBAC] to-[#F79009] text-white"> <div class="card w-fit bg-linear-to-tl from-[#FFDBAC] to-[#F79009] text-white">
<div class="card-body px-2 py-4"> <div class="card-body px-2 py-4">
<div class="card-title"> <div class="card-title">
<i class="ph ph-whatsapp-logo text-lg"></i> <i class="ph ph-whatsapp-logo text-lg text-gray-400"></i>
Help Desk Help Desk
</div> </div>
<hr class="text-white/30" /> <hr class="text-white/30" />

24
wwwroot/css/input.css
View File

@ -178,24 +178,32 @@
.menu-sidebar a, .menu-sidebar a,
.menu-sidebar summary { .menu-sidebar summary {
@apply rounded-full transition-colors duration-200; @apply transition-colors duration-200 border-0 shadow-none rounded-full;
} }
/* Untuk semua item sidebar (normal + collapsible summary) */ .menu-sidebar a {
@apply text-gray-500 font-medium;
}
.menu-sidebar summary {
@apply text-gray-500 font-medium;
}
.menu-sidebar details ul {
@apply space-y-2 py-2;
}
/* Hover / Active / Open state */
.menu-sidebar a:hover, .menu-sidebar a:hover,
.menu-sidebar a:active, .menu-sidebar a:active,
.menu-sidebar a.menu-active, .menu-sidebar a.menu-active,
.menu-sidebar details > summary:hover, .menu-sidebar details > summary:hover,
.menu-sidebar details > summary:active, .menu-sidebar details > summary:active,
.menu-sidebar details[open] > summary { .menu-sidebar details[open] > summary,
@apply bg-bank-sampah-primary-500 text-white shadow-none;
}
/* Untuk link di dalam isi collapsible */
.menu-sidebar details[open] > ul a:hover, .menu-sidebar details[open] > ul a:hover,
.menu-sidebar details[open] > ul a:active, .menu-sidebar details[open] > ul a:active,
.menu-sidebar details[open] > ul a.menu-active { .menu-sidebar details[open] > ul a.menu-active {
@apply text-bank-sampah-primary-500 bg-transparent font-bold shadow-none; @apply bg-bank-sampah-primary-500 text-white;
} }
.badge { .badge {