From 84ae9aff68f0a3492fc1e9b7cf08b8a1c259cce8 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 24 Jul 2026 10:38:11 +0700
Subject: [PATCH] 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.
---
 app/components/AppSidebar.vue                 | 21 ++++---
 .../ui/sidebar/SidebarGroupLabel.vue          |  2 +-
 .../2026-07-24-sidebar-icon-mode-and-sizes.md | 57 +++++++++++++++++++
 3 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 docs/history/2026-07-24-sidebar-icon-mode-and-sizes.md

diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index 8fb125b..702e816 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -26,7 +26,12 @@ const data = {
   navMain: [
     {
       title: "Dashboard",
-      url: "#",
+      url: "/admin/dashboard",
+      icon: Grid,
+    },
+    {
+      title: "Jenis Bisnis",
+      url: "/admin/business-types",
       icon: Grid,
     },
   ],
@@ -34,14 +39,14 @@ const data = {
 </script>
 
 <template>
-  <Sidebar collapsible="offcanvas">
+  <Sidebar collapsible="icon">
     <SidebarHeader>
       <SidebarMenu>
         <SidebarMenuItem>
           <SidebarMenuButton as-child class="data-[slot=sidebar-menu-button]:p-1.5!">
             <a href="#">
-              <Database class="size-5!" />
-              <span class="text-base font-semibold">Profitra</span>
+              <Database class="size-6!" />
+              <span class="text-lg font-semibold">Profitra</span>
             </a>
           </SidebarMenuButton>
         </SidebarMenuItem>
@@ -52,9 +57,11 @@ const data = {
         <SidebarGroupLabel>Master</SidebarGroupLabel>
         <SidebarMenu>
           <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
-            <SidebarMenuButton :tooltip="item.title">
-              <component :is="item.icon" v-if="item.icon" />
-              <span>{{ item.title }}</span>
+            <SidebarMenuButton as-child :tooltip="item.title">
+              <NuxtLink :to="item.url">
+                <component :is="item.icon" v-if="item.icon" />
+                <span>{{ item.title }}</span>
+              </NuxtLink>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
diff --git a/app/components/ui/sidebar/SidebarGroupLabel.vue b/app/components/ui/sidebar/SidebarGroupLabel.vue
index f5da130..2ec794d 100644
--- a/app/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/app/components/ui/sidebar/SidebarGroupLabel.vue
@@ -16,7 +16,7 @@ const props = defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
     :class="cn(
-      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-sm font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
       props.class)"
   >
diff --git a/docs/history/2026-07-24-sidebar-icon-mode-and-sizes.md b/docs/history/2026-07-24-sidebar-icon-mode-and-sizes.md
new file mode 100644
index 0000000..cf0e65e
--- /dev/null
+++ b/docs/history/2026-07-24-sidebar-icon-mode-and-sizes.md
@@ -0,0 +1,57 @@
+# 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.