fix: adaptive #2

frontend/src/app/providers/layout/layout.tsx

@@ -4,9 +4,34 @@ import { Navigation } from "@/app/providers/layout/navigation/navigation";
 import { useAgentStore } from "@/app/providers/layout/store/agent.store";
 
 export const Layout = ({ children }: { children: ReactNode }) => {
-  const [isOpen, setOpen] = useState(true);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window !== "undefined" ? window.innerWidth < 856 : false,
+  );
   const { fetchAgents } = useAgentStore();
 
+  const sidebarOpen = isMobile ? mobileOpen : true;
+
+  useEffect(() => {
+    const handleResize = () => {
+      const mobile = window.innerWidth < 856;
+      setIsMobile(mobile);
+      if (!mobile) {
+        setMobileOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const toggleSidebar = () => {
+    if (isMobile) {
+      setMobileOpen((prev) => !prev);
+    }
+  };
+
   useEffect(() => {
     fetchAgents();
   }, [fetchAgents]);
@@ -20,10 +45,17 @@ export const Layout = ({ children }: { children: ReactNode }) => {
   }, [fetchAgents]);
 
   return (
-    <div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--bg-primary)" }}>
-      <Sidebar isOpen={isOpen} onToggle={() => setOpen(!isOpen)} />
+    <div
+      className="flex h-screen overflow-hidden"
+      style={{ backgroundColor: "var(--bg-primary)" }}
+    >
+      <Sidebar
+        isOpen={sidebarOpen}
+        onToggle={toggleSidebar}
+        isMobile={isMobile}
+      />
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-        <Navigation />
+        <Navigation onToggleSidebar={toggleSidebar} isMobile={isMobile} />
         <div className="flex-1 overflow-auto p-4">{children}</div>
       </div>
     </div>