From 860846f43dcf8b5eb531a37e78dbfd9b6986b26f Mon Sep 17 00:00:00 2001
From: pyschonoice <monukk2002@gmail.com>
Date: Sat, 7 Jun 2025 20:22:02 +0530
Subject: [PATCH 1/2] "add a sidebar toggle button when sidebar was collpassed
 in both desktop and mobile version"

---
 frontend/ChatLayout.tsx | 57 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 53 insertions(+), 4 deletions(-)

diff --git a/frontend/ChatLayout.tsx b/frontend/ChatLayout.tsx
index a42c446..1bc6d85 100644
--- a/frontend/ChatLayout.tsx
+++ b/frontend/ChatLayout.tsx
@@ -1,14 +1,63 @@
-import { SidebarProvider } from '@/frontend/components/ui/sidebar';
+import {
+  SidebarProvider,
+  SidebarTrigger, // Import SidebarTrigger for the Sidebar opening and closing
+  Sidebar, 
+  SidebarInset, //Import SidebarInset as the main content wrapper
+  useSidebar, // Import useSidebar to conditionally render the trigger
+} from '@/frontend/components/ui/sidebar';
+
 import ChatSidebar from '@/frontend/components/ChatSidebar';
 import { Outlet } from 'react-router';
+import { Button } from '@/frontend/components/ui/button'; 
+import { PanelLeftIcon } from 'lucide-react'; 
+import { cn } from '@/lib/utils'; 
 
 export default function ChatLayout() {
   return (
     <SidebarProvider>
-      <ChatSidebar />
-      <div className="flex-1 relative">
-        <Outlet />
+      <div className="flex min-h-svh w-full">
+        <ChatSidebar />
+        <SidebarInset className="relative flex-1">
+          {/*
+            This is the global toggle button.
+            It's placed *outside* the ChatSidebar, ensuring it's always visible
+            even when the main sidebar is off-screen.
+          */}
+          <GlobalSidebarToggleButton />
+
+          <Outlet />
+        </SidebarInset>
       </div>
     </SidebarProvider>
   );
 }
+
+/**
+ * A standalone component for the sidebar toggle button.
+ * It uses the sidebar context to determine its visibility and action.
+ * Renders fixed, ensuring it's always accessible.
+ */
+function GlobalSidebarToggleButton() {
+  const { toggleSidebar, open, isMobile } = useSidebar();
+
+  const isButtonVisible = isMobile || !open;
+
+  if (!isButtonVisible) {
+    return null; 
+  }
+
+  return (
+    <Button
+      variant="ghost" 
+      size="icon"     
+      onClick={toggleSidebar} // Calls the context function to toggle
+      className={cn(
+        'fixed top-4 z-50', 
+        'left-4',
+      )}
+      aria-label="Toggle Sidebar" 
+    >
+      <PanelLeftIcon className="h-5 w-5" /> 
+    </Button>
+  );
+}
\ No newline at end of file

From 0173c9ab76aeb8edfd52ac628a05b2c6f719ff5c Mon Sep 17 00:00:00 2001
From: pyschonoice <monukk2002@gmail.com>
Date: Sat, 7 Jun 2025 20:31:22 +0530
Subject: [PATCH 2/2] "fixed the size"

---
 frontend/ChatLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/ChatLayout.tsx b/frontend/ChatLayout.tsx
index 1bc6d85..2076691 100644
--- a/frontend/ChatLayout.tsx
+++ b/frontend/ChatLayout.tsx
@@ -57,7 +57,7 @@ function GlobalSidebarToggleButton() {
       )}
       aria-label="Toggle Sidebar" 
     >
-      <PanelLeftIcon className="h-5 w-5" /> 
+      <PanelLeftIcon className="size-4" /> 
     </Button>
   );
 }
\ No newline at end of file