From ead2fdd6e9d967d664a7286b9a3a84e26c0e12ac Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Wed, 15 Oct 2025 17:56:45 +0200
Subject: [PATCH] Better sidebar toggle

---
 src/app/chat/page.tsx      |  2 +-
 src/components/Sidebar.tsx | 27 +++++++--------------------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index 6dbca1b..31af79b 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -14,7 +14,7 @@ export default function Chat() {
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
   const addMessage = useMessages((s) => s.addMessage);
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   return (
     <AppSidebar
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c3f6e8b..79bf2dd 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -128,26 +128,10 @@ export default function AppSidebar({
 
   return (
     <div className="flex h-screen">
-      {open && (
-        <div
-          className="absolute h-screen w-screen"
-          onClick={() => setOpen(false)}
-        />
-      )}
-      {/* <div
-        className={cn(
-          "flex h-screen border-r absolute md:static z-50 transform transition-transform duration-300 ease-in-out",
-          open ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0",
-          "md:static md:translate-x-0 md:opacity-100 pointer-events-none"
-        )}
-      > */}
       <div
         className={cn(
-          "flex h-screen border-r transform transition-transform duration-300 ease-in-out",
-          open
-            ? "translate-x-0 opacity-100"
-            : "-translate-x-full opacity-0 absolute",
-          "md:static md:translate-x-0 md:opacity-100 pointer-events-none"
+          "border-r transition-all duration-300 ease-in-out overflow-hidden flex",
+          open ? "w-md" : "w-0 md:w-md"
         )}
       >
         <div className="w-16 flex flex-col items-center gap-4 py-4 bg-muted border-r">
@@ -238,7 +222,7 @@ export default function AppSidebar({
         </div>
 
         {/* Right column */}
-        <div className="w-64 flex flex-col bg-card">
+        <div className="w-full flex flex-col bg-card">
           {server ? (
             <div className="p-3 border-b flex items-center gap-2">
               <h2>{server.name}</h2>
@@ -292,7 +276,10 @@ export default function AppSidebar({
         </div>
       </div>
       {open ? (
-        <div className="w-screen h-full overflow-x-hidden">
+        <div
+          className="w-screen h-full overflow-x-hidden"
+          onClick={() => setOpen(false)}
+        >
           <div className="overflow-x-hidden w-screen min-w-max flex-shrink-0">
             {children}
           </div>