Yoga Pangestu 84ae9aff68 feat: enhance sidebar functionality with icon-only mode and improved text/icon sizes

- Changed sidebar collapsible mode from `offcanvas` to `icon`, allowing it to shrink to icon-only display on collapse.
- Increased sizes for menu button height, text, and icons for better visibility.
- Updated relevant components to reflect these changes, ensuring a more user-friendly sidebar experience.

2026-07-24 10:38:11 +07:00

2.4 KiB

Raw Permalink Blame History

Sidebar Icon Mode & Size Enhancement

Tanggal: 2026-07-24 Status: Selesai

Tujuan

Mengubah sidebar agar saat di-collapse di layar besar, sidebar tidak menghilang total melainkan menyusut ke mode icon-only (hanya menampilkan icon), serta memperbesar ukuran teks dan icon di sidebar.

Yang Dikerjakan

1. Ubah Collapsible Mode dari `offcanvas` ke `icon`

Sebelumnya: collapsible="offcanvas" — sidebar menghilang total (slide off-screen ke kiri) saat di-collapse.
Sesudahnya: collapsible="icon" — sidebar menyusut ke 3rem (hanya icon), teks tersembunyi, dan tooltip muncul saat hover.
Tooltip sudah built-in di SidebarMenuButton.vue — otomatis muncul di sebelah kanan saat state === 'collapsed'.

Element	Sebelum	Sesudah
Menu button height	`h-8`	`h-10`
Menu button text	`text-sm`	`text-base`
Menu button icon	`[&>svg]:size-4`	`[&>svg]:size-5`
Icon-mode button size	`size-8!`	`size-10!`
Icon-mode padding	`p-2!`	`p-2.5!`
Group label text	`text-xs`	`text-sm`
Brand icon (AppSidebar)	`size-5!`	`size-6!`
Brand text (AppSidebar)	`text-base`	`text-lg`

3. File yang Diubah

File	Aksi	Detail
`app/components/AppSidebar.vue`	Diubah	`collapsible="icon"`, brand icon `size-6!`, brand text `text-lg`
`app/components/ui/sidebar/index.ts`	Diubah	CVA variants — icon size, button height, text size, icon-mode sizing
`app/components/ui/sidebar/SidebarGroupLabel.vue`	Diubah	Group label text `text-xs` → `text-sm`

Behavior Sidebar (Desktop)

Expanded (terbuka)

Sidebar lebar penuh (--sidebar-width = calc(var(--spacing) * 72))
Tampil: brand logo + teks "Profitra", group label "Master", menu items dengan icon + teks

Collapsed (tertutup)

Sidebar menyusut ke --sidebar-width-icon (3rem)
Tampil: hanya icon (brand icon, menu icons)
Teks tersembunyi (truncated via overflow-hidden)
Group label tersembunyi (opacity-0, -mt-8)
Hover pada menu item → tooltip muncul di sebelah kanan
Transisi width: transition-[width] duration-200 ease-linear

Notes

Mobile behavior tidak berubah — sidebar tetap menggunakan Sheet overlay.
Cookie persistence tetap berfungsi (sidebar_state=true|false).
Keyboard shortcut Ctrl/Cmd + B tetap berfungsi untuk toggle sidebar.

2.4 KiB Raw Permalink Blame History