novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: icon sidebar warna warni per menu

Browse Source 
- Dashboard: biru
- Input Pelanggaran: hijau (emerald)
- Data Pelanggaran: merah
- Data Siswa: ungu (violet)
- Presensi Siswa: cyan
- Surat Peringatan: amber
- Pengaturan: abu-abu
- dll

Aktif: warna solid, Tidak aktif: transparan 60%,
hover: warna semakin jelas
This commit is contained in:
Bro
2026-07-24 19:39:04 +07:00
parent 3e73d675d2
commit 9c32843254
1 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/nav-item.blade.php
+22 -1
View File
@@ -24,9 +24,30 @@ $faIcons = [
'lock' => 'fa-solid fa-lock',
];
$faClass = $faIcons[$icon] ?? 'fa-solid fa-circle';
// Warna ikon per menu
$iconColors = [
'home' => ['active' => 'text-blue-600', 'inactive' => 'text-blue-400/60 group-hover:text-blue-500'],
'plus-circle' => ['active' => 'text-emerald-600', 'inactive' => 'text-emerald-400/60 group-hover:text-emerald-500'],
'exclamation-triangle' => ['active' => 'text-red-600', 'inactive' => 'text-red-400/60 group-hover:text-red-500'],
'users' => ['active' => 'text-violet-600', 'inactive' => 'text-violet-400/60 group-hover:text-violet-500'],
'clipboard-check' => ['active' => 'text-cyan-600', 'inactive' => 'text-cyan-400/60 group-hover:text-cyan-500'],
'document-text' => ['active' => 'text-amber-600', 'inactive' => 'text-amber-400/60 group-hover:text-amber-500'],
'tag' => ['active' => 'text-pink-600', 'inactive' => 'text-pink-400/60 group-hover:text-pink-500'],
'list' => ['active' => 'text-orange-600', 'inactive' => 'text-orange-400/60 group-hover:text-orange-500'],
'chart-bar' => ['active' => 'text-indigo-600', 'inactive' => 'text-indigo-400/60 group-hover:text-indigo-500'],
'refresh' => ['active' => 'text-teal-600', 'inactive' => 'text-teal-400/60 group-hover:text-teal-500'],
'cog' => ['active' => 'text-slate-600', 'inactive' => 'text-slate-400/60 group-hover:text-slate-500'],
'users-cog' => ['active' => 'text-purple-600', 'inactive' => 'text-purple-400/60 group-hover:text-purple-500'],
'database' => ['active' => 'text-sky-600', 'inactive' => 'text-sky-400/60 group-hover:text-sky-500'],
'arrows-rotate' => ['active' => 'text-rose-600', 'inactive' => 'text-rose-400/60 group-hover:text-rose-500'],
'lock' => ['active' => 'text-yellow-600', 'inactive' => 'text-yellow-400/60 group-hover:text-yellow-500'],
];
$ic = $iconColors[$icon] ?? ['active' => 'text-blue-600', 'inactive' => 'text-gray-400 group-hover:text-gray-600'];
$iconClass = $isActive ? $ic['active'] : $ic['inactive'];
@endphp
<a href="{{ $href }}" {{ $attributes->merge(['class' => 'group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-150 ' . $classes]) }}>
<i class="{{ $faClass }} mr-3 w-5 text-center text-sm flex-shrink-0 {{ $isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600' }}"></i>
<i class="{{ $faClass }} mr-3 w-5 text-center text-sm flex-shrink-0 {{ $iconClass }} transition-colors duration-150"></i>
{{ $slot }}
</a>