From 319473749995c624edf13d92ba05b7b806aa829b Mon Sep 17 00:00:00 2001
From: OpenClaw Bot <ai-agent@topdoglabs.com>
Date: Sat, 21 Feb 2026 23:16:17 -0600
Subject: [PATCH] Make sidebar toggle button more visible - blue with white
 chevron

---
 components/layout/sidebar.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 0997332..d60c324 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -124,21 +124,20 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
         )}
       >
         {/* Collapse Toggle Button */}
-        <Button
-          variant="ghost"
-          size="icon"
+        <button
           onClick={() => setCollapsed(!collapsed)}
           className={cn(
-            "absolute -right-3 top-6 w-6 h-6 rounded-full border border-border bg-card shadow-sm",
-            "hover:bg-accent z-50"
+            "absolute -right-4 top-8 w-8 h-8 rounded-full border-2 border-blue-500 bg-blue-500 text-white shadow-lg",
+            "hover:bg-blue-600 hover:scale-110 transition-all z-50 flex items-center justify-center"
           )}
+          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
         >
           {collapsed ? (
-            <ChevronRight className="w-3 h-3" />
+            <ChevronRight className="w-5 h-5" />
           ) : (
-            <ChevronLeft className="w-3 h-3" />
+            <ChevronLeft className="w-5 h-5" />
           )}
-        </Button>
+        </button>
 
         <SidebarContent pathname={pathname} collapsed={collapsed} />
       </div>