From fe2734310a1f982e8af0c0528909939f78a222b9 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Sun, 14 Jun 2026 22:25:46 +0700
Subject: [PATCH] fix(layout): correct sidebar toggle behavior and navigation
 logic

- Remove `onClick` toggle handler from `Sidebar` links to prevent unwanted state changes during navigation.
- Remove aggressive `onClick` auto-collapse from `MainLayout` content wrapper so the sidebar remains stable.
- Ensure sidebar state is exclusively managed by the dedicated toggle button, aligning with standard desktop UX.
---
 apps/web/src/components/layout/main-layout.tsx |  8 +-------
 apps/web/src/components/layout/sidebar.tsx     | 13 ++++++-------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/layout/main-layout.tsx b/apps/web/src/components/layout/main-layout.tsx
index 5179f45..c8e87fc 100644
--- a/apps/web/src/components/layout/main-layout.tsx
+++ b/apps/web/src/components/layout/main-layout.tsx
@@ -19,13 +19,7 @@ export function MainLayout({ children }: Props) {
       <Sidebar />
 
       {/* Main Content */}
-      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden"
-        onClick={() => {
-          if (isSidebarOpen) {
-            setIsSidebarOpen(false);
-          }
-        }}
-      >
+      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden">
         {/* Header Mobile */}
         <div className="md:hidden flex items-center justify-between px-5 h-20 bg-[#306D29] text-white shrink-0 shadow-sm z-20">
           <div className="flex items-center gap-3 font-semibold">
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 0505098..f1ecd7f 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -3,14 +3,14 @@ import { Link, useLocation } from "react-router-dom";
 import {
   Leaf,
   LogOut,
-  Menu,
-  ChevronLeft,
+  ChevronsLeft,
   LayoutDashboard,
   Scan,
   Activity,
   BookOpen,
   UserCheck,
   ChartBar,
+  ChevronsRight,
 } from "lucide-react";
 import { MobileNav } from "./mobile-nav";
 import { useAuthStore } from "@/store/auth-store";
@@ -81,6 +81,7 @@ export function Sidebar() {
           </div>
         </div>
 
+        {/* Toggle Button */}
         <button
           onClick={() => setIsSidebarOpen(!isSidebarOpen)}
           className={`rounded-xl transition-colors flex items-center justify-center shrink-0 ${
@@ -91,9 +92,9 @@ export function Sidebar() {
           title={isSidebarOpen ? "Sembunyikan Menu" : "Buka Menu"}
         >
           {isSidebarOpen ? (
-            <ChevronLeft className="w-5 h-5" />
+            <ChevronsLeft className="w-7 h-7" />
           ) : (
-            <Menu className="w-6 h-6" />
+            <ChevronsRight className="w-7 h-7" />
           )}
         </button>
       </div>
@@ -103,7 +104,6 @@ export function Sidebar() {
         className={`flex-1 overflow-y-auto py-6 flex flex-col gap-3 ${isSidebarOpen ? "px-5" : "px-0 items-center"}`}
       >
         {filteredNavItems.map((item) => {
-          // Skip expert-only items for non-expert users
           if (item.expertOnly && !isExpert) {
             return null;
           }
@@ -116,7 +116,6 @@ export function Sidebar() {
               key={item.path}
               to={item.path}
               title={item.label}
-              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
               className={`flex items-center rounded-full font-medium transition-all ${
                 isSidebarOpen
                   ? "px-4 py-3 gap-3 text-[16px] w-full"
@@ -160,4 +159,4 @@ export function Sidebar() {
       />
     </aside>
   );
-}
+}
\ No newline at end of file