Make windows

src/App.js

@@ -1,9 +1,27 @@
-import './App.css';
-import Diagram from './diagram';
+import Diagram from "./diagram";
+import { ResizableBox } from "react-resizable";
+import "react-resizable/css/styles.css";
 
 function App() {
   return (
-    <Diagram/>
+    <div className="flex">
+      <ResizableBox
+        width={window.innerWidth * 0.2}
+        height={window.innerHeight}
+        resizeHandles={["e"]}
+        minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
+        axis="x"
+      >
+        <span className="text">window 1</span>
+      </ResizableBox>
+      <ResizableBox
+        width={window.innerWidth * 0.8}
+        height={window.innerHeight}
+        resizeHandles={[]}
+      >
+        <Diagram />
+      </ResizableBox>
+    </div>
   );
 }
 

src/diagram/index.jsx

@@ -13,8 +13,8 @@ function Diagram() {
         color: "#F1F92A",
       },
       model: graph,
-      height: window.height,
-      width: window.width,
+      height: window.innerHeight,
+      width: "100%",
       gridSize: 1,
       interactive: true,
     });
@@ -36,7 +36,7 @@ function Diagram() {
 
   return (
     <>
-      <div id="canvas" className="h-screen w-screen" ref={canvas} />
+      <div id="canvas" className="max-w-full h-full" ref={canvas} />
     </>
   );
 }