# Sidebar & Header Layout - Session 2

**Tanggal:** 2026-07-23
**Status:** Selesai

## Tujuan

Memperbaiki error package `dnd-kit-vue` dan memindahkan user navigation dari sidebar ke header, serta menambahkan fitur sticky header dan grouping menu sidebar.

## Yang Dikerjakan

### 1. Fix `dnd-kit-vue` Package Import Error
- **Error:** `Cannot find package 'dnd-kit-vue' imported from DragHandle.vue`
- **Penyebab:** Package `dnd-kit-vue` (unovue) belum terinstall.
- **Solusi:** Install package `dnd-kit-vue@0.0.2` menggunakan `bun add dnd-kit-vue`.
- Package ini digunakan oleh 3 komponen:
  - `DragHandle.vue` — `useSortableContext`
  - `DraggableRow.vue` — `useSortable`
  - `DataTable.vue` — `DragDropProvider`

### 2. Pindahkan User Nav dari Sidebar ke Header
- **Sebelumnya:** User profile ada di sidebar footer (`NavUser.vue`).
- **Sesudahnya:** User profile dipindahkan ke header (`SiteHeader.vue`) sebagai avatar dropdown.
- Dropdown menu berisi: Account, Billing, Log out.

### 3. Tambahkan Icon Homepage & Notifikasi di Header
- **Homepage:** Icon `Home` dari `@lucide/vue` dengan link ke `/`.
- **Notifikasi:** Icon `Bell` dari `@lucide/vue` sebagai tombol.
- Layout header sekarang: `[SidebarTrigger] | [Home] [Bell] | [Avatar ▾]`

### 4. Header Sticky saat Scroll
- Menambahkan class `sticky top-0 z-10 bg-background` pada `<header>`.
- Header tetap di atas saat user scroll content.

### 5. Grouping Menu Sidebar dengan Label "Master"
- Menambahkan `<SidebarGroupLabel>Master</SidebarGroupLabel>` di sidebar.
- Menu navigasi utama (Dashboard) dibungkus dalam `<SidebarGroupContent>`.
- Struktur: `SidebarGroupContent > SidebarGroupLabel + SidebarMenu > SidebarMenuItem`.

## File yang Diubah

| File | Aksi |
|------|------|
| `package.json` | Diubah - tambah `dnd-kit-vue` |
| `app/components/AppSidebar.vue` | Diubah - hapus NavUser, tambah SidebarGroupLabel |
| `app/components/SiteHeader.vue` | Diubah - tambah user nav, bell, home icon, sticky |

## Dependencies yang Ditambah

```bash
bun add dnd-kit-vue
```

## Struktur Header Baru

```vue
<header class="sticky top-0 z-10 bg-background ...">
  <div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
    <SidebarTrigger class="-ml-1" />
    <Separator orientation="vertical" class="mx-2 ..." />
    <div class="ml-auto flex items-center gap-2">
      <!-- Homepage Icon -->
      <Button variant="ghost" size="icon" class="size-8" as-child>
        <a href="/"><Home class="size-4" /></a>
      </Button>
      <!-- Notification Bell -->
      <Button variant="ghost" size="icon" class="size-8">
        <Bell class="size-4" />
      </Button>
      <Separator orientation="vertical" class="mx-1 ..." />
      <!-- User Avatar Dropdown -->
      <DropdownMenu>...</DropdownMenu>
    </div>
  </div>
</header>
```

## Struktur Sidebar Baru

```vue
<Sidebar collapsible="offcanvas">
  <SidebarHeader>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton>Profitra</SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarHeader>
  <SidebarContent>
    <SidebarGroupContent class="flex flex-col gap-2">
      <SidebarGroupLabel>Master</SidebarGroupLabel>
      <SidebarMenu>
        <SidebarMenuItem>Dashboard</SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroupContent>
    <NavSecondary :items="data.navSecondary" class="mt-auto" />
  </SidebarContent>
</Sidebar>
```

## Notes

- `NavUser.vue` masih ada di codebase tapi tidak digunakan di sidebar maupun header.
- User data di header masih hardcode (`shadcn`, `m@example.com`). Perlu diganti dengan data dari auth nanti.
- Package `dnd-kit-vue` (unovue v0.0.2) adalah package lama. Jika ingin migrasi ke official `@dnd-kit/vue` (v0.5.0), perlu update import path di 3 komponen.
