From 8ede458a711ce3e8cf5eabc897a4fc258570057b Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Fri, 12 Jun 2026 11:27:23 +0700
Subject: [PATCH 1/3] refactor(sidebar): set initial state to collapsed by
 default

- Update `isSidebarOpen` initial state from true to false in `sidebar.tsx`.
- Ensure the sidebar starts in a mini/collapsed mode when the dashboard is first loaded to provide more space for the main content.
---
 apps/web/src/components/layout/sidebar.tsx | 23 ++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 0a53a54..8fa5825 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -13,21 +13,31 @@ import {
   ChartBar,
 } from "lucide-react";
 import { MobileNav } from "./mobile-nav";
+import { useAuthStore } from "@/store/auth-store";
 
 const NAV_ITEMS = [
   { path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
   { path: "/scan", label: "Pindai Daun", icon: Scan },
   { path: "/diagnoses", label: "Diagnosa", icon: Activity },
   { path: "/catalog", label: "Pustaka", icon: BookOpen, altPath: "/library" },
-  { path: "/expert/reviews", label: "Tinjauan Pakar", icon: UserCheck },
-  { path: "/telemetry", label: "Telemetry", icon: ChartBar },
+  { path: "/expert/reviews", label: "Tinjauan Pakar", icon: UserCheck, expertOnly: true },
+  { path: "/telemetry", label: "Telemetry", icon: ChartBar, expertOnly: true },
 ];
 
 export function Sidebar() {
   const location = useLocation();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  const user = useAuthStore((state) => state.user);
+  const isExpert = user?.role === "expert";
+
+  const filteredNavItems = NAV_ITEMS.filter((item) => { if (!item.expertOnly || isExpert) {
+    return true;
+  }
+  return false;
+});
+
   const isActive = (path: string, altPath?: string) => {
     if (path === "/dashboard" || path === "/scan") {
       return location.pathname === path;
@@ -83,7 +93,12 @@ export function Sidebar() {
       <nav
         className={`flex-1 overflow-y-auto py-6 flex flex-col gap-3 ${isSidebarOpen ? "px-5" : "px-0 items-center"}`}
       >
-        {NAV_ITEMS.map((item) => {
+        {filteredNavItems.map((item) => {
+          // Skip expert-only items for non-expert users
+          if (item.expertOnly && !isExpert) {
+            return null;
+          }
+
           const active = isActive(item.path, item.altPath);
           const Icon = item.icon;
 

From a77a6c84ff1bafaf9ed72b434c8b1d51a5736e02 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Fri, 12 Jun 2026 12:26:11 +0700
Subject: [PATCH 2/3] fix(sidebar): persist sidebar state across page
 navigation

- Move `isSidebarOpen` state from local component (`useState`) to global Zustand store (`ui-store.ts`).
- Fix an issue where the sidebar would incorrectly reset to its default closed state when navigating between routes (e.g., to the Telemetry page) due to component remounting.
- Ensure consistent sidebar toggle behavior across the entire dashboard application.
---
 apps/web/src/components/layout/sidebar.tsx | 23 +++++++++++++++-------
 apps/web/src/store/ui-store.ts             |  8 +++++++-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 8fa5825..725916a 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -14,29 +14,38 @@ import {
 } from "lucide-react";
 import { MobileNav } from "./mobile-nav";
 import { useAuthStore } from "@/store/auth-store";
+import { useUiStore } from "@/store/ui-store";
 
 const NAV_ITEMS = [
   { path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
   { path: "/scan", label: "Pindai Daun", icon: Scan },
   { path: "/diagnoses", label: "Diagnosa", icon: Activity },
   { path: "/catalog", label: "Pustaka", icon: BookOpen, altPath: "/library" },
-  { path: "/expert/reviews", label: "Tinjauan Pakar", icon: UserCheck, expertOnly: true },
+  {
+    path: "/expert/reviews",
+    label: "Tinjauan Pakar",
+    icon: UserCheck,
+    expertOnly: true,
+  },
   { path: "/telemetry", label: "Telemetry", icon: ChartBar, expertOnly: true },
 ];
 
 export function Sidebar() {
   const location = useLocation();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  const isSidebarOpen = useUiStore((state) => state.isSidebarOpen);
+  const setIsSidebarOpen = useUiStore((state) => state.setIsSidebarOpen);
+
   const user = useAuthStore((state) => state.user);
   const isExpert = user?.role === "expert";
 
-  const filteredNavItems = NAV_ITEMS.filter((item) => { if (!item.expertOnly || isExpert) {
-    return true;
-  }
-  return false;
-});
+  const filteredNavItems = NAV_ITEMS.filter((item) => {
+    if (!item.expertOnly || isExpert) {
+      return true;
+    }
+    return false;
+  });
 
   const isActive = (path: string, altPath?: string) => {
     if (path === "/dashboard" || path === "/scan") {
diff --git a/apps/web/src/store/ui-store.ts b/apps/web/src/store/ui-store.ts
index 8f0fcfa..d37c811 100644
--- a/apps/web/src/store/ui-store.ts
+++ b/apps/web/src/store/ui-store.ts
@@ -1,12 +1,18 @@
-import { create } from 'zustand';
+import { create } from "zustand";
 
 type UiState = {
   dashboardCompact: boolean;
   toggleDashboardCompact: () => void;
+
+  isSidebarOpen: boolean;
+  setIsSidebarOpen: (isOpen: boolean) => void;
 };
 
 export const useUiStore = create<UiState>((set) => ({
   dashboardCompact: false,
   toggleDashboardCompact: () =>
     set((state) => ({ dashboardCompact: !state.dashboardCompact })),
+
+  isSidebarOpen: false,
+  setIsSidebarOpen: (isOpen: boolean) => set({ isSidebarOpen: isOpen }),
 }));

From 3b8cb49f2a259ea542658a8b2dd0c6ca371e5c14 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Fri, 12 Jun 2026 12:35:46 +0700
Subject: [PATCH 3/3] fix(sidebar): toggle sidebar state when clicking
 navigation links

- Update the `onClick` handler for navigation links in `sidebar.tsx` to use `!isSidebarOpen` instead of a hardcoded boolean.
- Enable navigation items to act as smart toggles: expanding the sidebar when clicked in collapsed mode, and collapsing it when clicked in expanded mode.
- Improve overall user experience by reducing the need to manually click the main toggle button.
---
 apps/web/src/components/layout/sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 725916a..0505098 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -116,7 +116,7 @@ export function Sidebar() {
               key={item.path}
               to={item.path}
               title={item.label}
-              onClick={() => setIsSidebarOpen(true)}
+              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
               className={`flex items-center rounded-full font-medium transition-all ${
                 isSidebarOpen
                   ? "px-4 py-3 gap-3 text-[16px] w-full"