updated chat andlayout

frontend/src/layouts/social/Chat.tsx

@@ -1,11 +1,34 @@
+import { useState } from "react";
 import { Outlet } from "react-router-dom";
+import { FiMenu, FiChevronsLeft } from "react-icons/fi";
 import ChatSidebar from "@/components/social/chat/ChatSidebar";
 
 export default function ChatLayout() {
+  const [open, setOpen] = useState(true);
+
   return (
-    <div className="grid h-[calc(100vh-0px)] grid-cols-[280px_1fr]">
-      <ChatSidebar />
-      <section className="flex h-full flex-col overflow-hidden">
+    <div
+      className={[
+        "grid h-screen transition-[grid-template-columns] duration-200",
+        open ? "grid-cols-[280px_1fr]" : "grid-cols-[0px_1fr]",
+      ].join(" ")}
+    >
+      {/* Sidebar — hidden via overflow+width collapse, not unmount (keeps scroll pos) */}
+      <div className="overflow-hidden">
+        <ChatSidebar />
+      </div>
+
+      <section className="relative flex h-full flex-col overflow-hidden">
+        {/* Sidebar toggle — sits at the top-left of the chat pane */}
+        <button
+          type="button"
+          onClick={() => setOpen((v) => !v)}
+          className="absolute left-3 top-3 z-20 flex h-7 w-7 items-center justify-center rounded-full bg-brand-bgLight/60 text-brand-text/60 hover:bg-brand-lines/20 hover:text-brand-text transition-colors"
+          aria-label={open ? "Hide sidebar" : "Show sidebar"}
+        >
+          {open ? <FiChevronsLeft size={15} /> : <FiMenu size={15} />}
+        </button>
+
         <Outlet />
       </section>
     </div>