Plan layout

src/components/control_panel/index.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function ControlPanel() {
+  return (
+    <nav className="bg-gray-200 ">
+      <div className="flex justify-between items-center">
+        <ul className="flex justify-start text-md ms-3">
+          <li className="me-5">File</li>
+          <li className="me-5">Edit</li>
+          <li className="me-5">Insert</li>
+          <li className="me-5">View</li>
+          <li className="me-5">Help</li>
+        </ul>
+        <button>
+          <i className="fa-solid fa-caret-up me-3"></i>
+        </button>
+      </div>
+      <div className="p-1">
+        tools
+      </div>
+    </nav>
+  );
+}

src/components/diagram/index.jsx

@@ -10,7 +10,7 @@ function Diagram() {
     new dia.Paper({
       el: document.getElementById("canvas"),
       background: {
-        color: "#F1F92A",
+        color: "#aec3b0",
       },
       model: graph,
       height: "100%",
@@ -34,11 +34,7 @@ function Diagram() {
     rect.addTo(graph);
   }, []);
 
-  return (
-    <>
-      <div id="canvas" className="max-w-full h-full" ref={canvas} />
-    </>
-  );
+  return <div id="canvas" ref={canvas} />;
 }
 
 export default Diagram;

src/components/header/index.jsx

@@ -5,12 +5,12 @@ import "./index.css";
 
 export default function Header(props) {
   return (
-    <nav className="flex justify-between py-4 bg-blue text-white items-center">
-      <img width={142} src={logo} alt="logo" className="ms-5" />
+    <nav className="flex justify-between py-2 bg-blue text-white items-center">
+      <img width={136} src={logo} alt="logo" className="ms-8" />
       <div className="text-xl">{props.name}</div>
-      <div className="flex justify-around items-center text-md me-5">
-        <button className="me-4 border px-3 py-1 rounded-lg">
-          <i class="fa-solid fa-lock me-2"></i>Share
+      <div className="flex justify-around items-center text-md me-8">
+        <button className="me-6 border px-4 py-1 rounded-xl">
+          <i className="fa-solid fa-lock me-2"></i>Share
         </button>
         <img src={blank_pfp} alt="profile" className="rounded-full h-10 w-10" />
       </div>

src/components/sidebar/index.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Sidebar() {
+  return (
+    <div className="px-3 fixed right-0 bg-white h-full">
+      <div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
+      <div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
+      <div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
+      <div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
+    </div>
+  );
+}

src/editor/index.jsx

@@ -1,14 +1,17 @@
 import React from "react";
 import Diagram from "../components/diagram";
+import Header from "../components/header";
+import Sidebar from "../components/sidebar";
 import { ResizableBox } from "react-resizable";
 import "react-resizable/css/styles.css";
-import Header from "../components/header";
+import ControlPanel from "../components/control_panel";
 
 export default function Editor(props) {
   return (
     <>
       <Header name={props.name} />
-      <div className="flex">
+      <ControlPanel/>
+      <div className="flex h-full">
         <ResizableBox
           width={window.innerWidth * 0.2}
           height={window.innerHeight}
@@ -19,10 +22,10 @@ export default function Editor(props) {
         >
           <span className="text">window 1</span>
         </ResizableBox>
-        <div>
+        <div className="flex-grow">
           <Diagram />
         </div>
-        <div>hi</div>
+        <Sidebar/>
       </div>
     </>
   );

src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  overflow: hidden;
+}