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