84ae9aff68
- 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.
58 lines
2.4 KiB
Markdown
58 lines
2.4 KiB
Markdown
# 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'`.
|
|
|
|
### 2. Perbesar Ukuran Icon & Teks Menu
|
|
|
|
| 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.
|