0c732e71cf
- Fixed import error for `dnd-kit-vue` by installing the package. - Moved user navigation from sidebar to header, adding a dropdown for account options. - Added homepage and notification icons to the header. - Implemented sticky header functionality during scroll. - Grouped sidebar menu items under a "Master" label for better organization. - Updated relevant components and package.json to include new dependencies.
106 lines
3.7 KiB
Markdown
106 lines
3.7 KiB
Markdown
# 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.
|