Yoga Pangestu 0c732e71cf feat: update sidebar and header layout; fix dnd-kit-vue package error

- 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.

2026-07-23 23:43:04 +07:00

3.7 KiB

Raw Permalink Blame History

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.

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

bun add dnd-kit-vue

Struktur Header Baru

<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

<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.

3.7 KiB Raw Permalink Blame History