# 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`