37 lines
848 B
Markdown
37 lines
848 B
Markdown
# SIDEBAR.md
|
||
## Spesifikasi Sidebar Navigasi – DESA+
|
||
|
||
### Tujuan
|
||
Membuat sidebar navigasi dengan **indikator menu aktif (isActive)** seperti pada desain:
|
||
- Menu aktif memiliki **background biru muda**
|
||
- Ada **indikator garis vertikal di sisi kiri**
|
||
- Status aktif mengikuti **route/path yang sedang dibuka**
|
||
|
||
---
|
||
## Perilaku isActive
|
||
|
||
### Definisi isActive
|
||
Sebuah menu dianggap **aktif** jika:
|
||
- `currentPath === menu.path`
|
||
- atau (opsional) `currentPath.startsWith(menu.path)` untuk nested route
|
||
|
||
---
|
||
|
||
## Tampilan Menu Aktif
|
||
|
||
Jika menu **AKTIF**, maka:
|
||
- Background: `#E6F0FF` (biru muda)
|
||
- Text: bold / semibold
|
||
- Border kiri:
|
||
- Lebar: `4px`
|
||
- Warna: `#1E40AF` (biru tua)
|
||
- Border radius: `8px`
|
||
- Transition halus (`150–200ms`)
|
||
|
||
Jika menu **TIDAK AKTIF**:
|
||
- Background transparan
|
||
- Text normal
|
||
- Hover state:
|
||
- Background `#F1F5F9`
|
||
|
||
--- |