Made flow panel closable

components/FlowEditor/Panel.tsx

@@ -1,5 +1,27 @@
+import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
+import useStore from "../../lib/FlowEditor/FlowEditorStore";
+
 const Panel = () => {
-  return <aside className="flow-panel"></aside>;
+  const { panelClosed, togglePanelState } = useStore();
+
+  const PanelButton = () => {
+    return (
+      <div
+        className={`flow-panel-button ${panelClosed ? "rotate-180" : ""}`}
+        onClick={togglePanelState}
+      >
+        <VscArrowLeft size={40} />
+      </div>
+    );
+  };
+
+  return (
+    <aside
+      className={`flow-panel ${panelClosed ? "w-0" : "w-60"} duration-300`}
+    >
+      <PanelButton />
+    </aside>
+  );
 };
 
 export default Panel;

styles/globals.css

@@ -38,7 +38,29 @@
     border border-gray-600 rounded-full
     mx-2;
   }
+
   .content {
     @apply ml-16;
   }
+
+  .flow-editor {
+    @apply flex flex-row
+    bg-content;
+  }
+
+  .flow-panel {
+    @apply relative flex flex-col
+    bg-panel
+    z-30;
+  }
+
+  .flow-panel-button {
+    @apply absolute flex items-center justify-center
+    w-10 h-10 mt-4 -right-12
+    bg-gray-800 text-secondary
+    rounded-xl cursor-pointer;
+  }
+
+  .flow {
+  }
 }