web/docs/history/2026-07-25-sidebar-dua-panel.md

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:

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:

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

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