106 lines
4.0 KiB
Markdown
106 lines
4.0 KiB
Markdown
# Sidebar Dua Panel (Icon Rail + Content Panel)
|
|
|
|
**Tanggal:** 2026-07-25
|
|
**Status:** Selesai
|
|
|
|
## Tujuan
|
|
Merubah struktur sidebar dari satu panel menjadi dua panel: Icon Rail (kiri) berisi icon group menu, dan Content Panel (kanan) berisi sub-menu dari group yang dipilih.
|
|
|
|
## Yang Dikerjakan
|
|
|
|
### 1. Restrukturisasi Data Menu
|
|
Data menu diubah dari flat `navMain` menjadi grouped `groups[]` agar mendukung multiple group.
|
|
|
|
**Sebelum:**
|
|
```ts
|
|
navMain: [
|
|
{ title: "Dashboard", url: "/admin/dashboard", icon: Grid },
|
|
{ title: "Jenis Bisnis", url: "/admin/business-types", icon: Grid },
|
|
{ title: "Plans", url: "/admin/plans", icon: CreditCard },
|
|
]
|
|
```
|
|
|
|
**Sesudah:**
|
|
```ts
|
|
const activeGroup = ref('Master')
|
|
|
|
const groups = [
|
|
{
|
|
title: 'Master',
|
|
icon: Database,
|
|
items: [
|
|
{ title: 'Dashboard', url: '/admin/dashboard', icon: Grid },
|
|
{ title: 'Jenis Bisnis', url: '/admin/business-types', icon: Grid },
|
|
{ title: 'Plans', url: '/admin/plans', icon: CreditCard },
|
|
],
|
|
},
|
|
]
|
|
```
|
|
|
|
### 2. Perubahan Layout Sidebar
|
|
Sidebar diubah dari single panel menjadi dua panel berdampingan (flex-row).
|
|
|
|
**Layout Baru:**
|
|
```
|
|
┌─────────────────────────────────────────────┐
|
|
│ [Icon Rail] │ [Content Panel] │
|
|
│ ~3rem fixed │ flex-1 │
|
|
├─────────────────────┼───────────────────────┤
|
|
│ ◉ [Database] │ Master │
|
|
│ (Logo) │ ────────────── │
|
|
│ │ • Dashboard │
|
|
│ ◉ [Database] ◀aktif │ • Jenis Bisnis │
|
|
│ (Master) │ • Plans │
|
|
│ ↑ hover → "Master"│ │
|
|
└─────────────────────────────────────────────┘
|
|
```
|
|
|
|
### 3. Tooltip pada Icon Rail
|
|
- Sebelumnya menggunakan `:tooltip` prop dari `SidebarMenuButton` yang hanya muncul saat sidebar collapsed
|
|
- Sekarang menggunakan `Tooltip` + `TooltipContent` dari `@/components/ui/tooltip` agar selalu muncul di hover
|
|
|
|
### 4. Hapus Header "Profitra"
|
|
- `SidebarHeader` yang berisi tulisan "Profitra" dihapus
|
|
- Sub-menu langsung berada di bagian atas panel kanan (tanpa spasi kosong)
|
|
|
|
### 5. Group Label Styling
|
|
- `SidebarGroupLabel` diberi `class="text-lg font-bold"` agar lebih besar dan tebal
|
|
|
|
### 6. Sistem Filter Group
|
|
- Klik icon group di panel kiri → `activeGroup` berubah → panel kanan menampilkan sub-menu dari group yang dipilih
|
|
- Icon yang aktif mendapat highlight via CSS `data-active="true"`
|
|
|
|
## File yang Diubah
|
|
|
|
| File | Aksi | Detail |
|
|
|------|------|--------|
|
|
| `app/components/AppSidebar.vue` | Diubah | Restrukturisasi dari flat menu ke grouped menu dengan two-panel layout, tooltip custom, hapus header, styling label |
|
|
|
|
### 7. Active State Menu
|
|
- Menu item yang sedang aktif (sesuai URL route) mendapat `is-active` → muncul highlight background
|
|
- `activeGroup` otomatis terdeteksi dari route path saat halaman dimuat
|
|
- Ketika navigasi ke halaman lain, `activeGroup` otomatis berubah mengikuti route baru
|
|
- User tetap bisa klik icon group secara manual untuk melihat group lain
|
|
|
|
### 8. Route Detection
|
|
```ts
|
|
const route = useRoute()
|
|
|
|
// Auto-detect active group from current URL
|
|
const activeGroup = ref(
|
|
groups.find(g => g.items.some(it => route.path === it.url))?.title ?? groups[0].title
|
|
)
|
|
|
|
// Watch route changes
|
|
watch(() => route.path, (path) => {
|
|
const found = groups.find(g => g.items.some(it => it.url === path))
|
|
if (found) activeGroup.value = found.title
|
|
})
|
|
```
|
|
|
|
## Notes
|
|
- Menggunakan `collapsible="icon"` agar spacing mechanism (peer) tetap berfungsi dengan `SidebarInset`
|
|
- Tooltip menggunakan `Tooltip` dari reka-ui via `@/components/ui/tooltip` agar muncul di hover meski sidebar expanded
|
|
- `useRoute()` auto-import dari Nuxt
|
|
- Siap untuk penambahan group baru (Manaje, Konten, dll) cukup dengan menambah entry di array `groups`
|