From 6c5ae38361ffe63697e0609f6180a1d4759c8e85 Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Thu, 14 Jul 2022 18:09:59 +0000
Subject: [PATCH] Made flow panel closable

---
 components/FlowEditor/Panel.tsx | 24 +++++++++++++++++++++++-
 styles/globals.css              | 22 ++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/components/FlowEditor/Panel.tsx b/components/FlowEditor/Panel.tsx
index aef2131..96ceacd 100644
--- a/components/FlowEditor/Panel.tsx
+++ b/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;
diff --git a/styles/globals.css b/styles/globals.css
index 714e72e..1af1574 100644
--- a/styles/globals.css
+++ b/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 {
+  }
 }