hide left panel

Author: dmitriigaidarji

src/containers/layout/Layout.tsx

@@ -3,12 +3,19 @@ import "./layout.scss";
 import LeftPanel from "../sidepanel/LeftPanel";
 import QueryTabsContainer from "../query-tabs/QueryTabsContainer";
 import QueryProvider from "../../providers/QueryProvider";
+import { useEffect, useState } from "react";
 const Layout: React.FC = () => {
+  const [leftPanelOpen, setLeftPanelOpen] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      window.dispatchEvent(new Event("resize"));
+    }, 600);
+  }, [leftPanelOpen]);
   return (
     <QueryProvider>
       <div className={"AppLayoutContainer"}>
-        <LeftPanel />
-        <QueryTabsContainer />
+        <LeftPanel open={leftPanelOpen} setOpen={setLeftPanelOpen} />
+        <QueryTabsContainer leftPanelOpen={leftPanelOpen} />
       </div>
     </QueryProvider>
   );

src/containers/layout/layout.scss

@@ -5,17 +5,5 @@
     vertical-align: top;
     overflow-y: auto;
     white-space: normal;
-
-    &:nth-child(1) {
-      width: 400px;
-      padding: 20px;
-      height: 100vh;
-      overflow-y: auto;
-      position: fixed;
-    }
-    &:nth-child(2) {
-      padding-left: 400px;
-      width: 100%; //calc(100vw - 450px);
-    }
   }
 }

src/containers/query-tabs/QueryTabsContainer.tsx

@@ -4,19 +4,19 @@ import { useContext } from "react";
 import { QueryContext } from "../../providers/QueryProvider";
 import FrameCypherEditor from "../frame/FrameCypherEditor";
 
-function QueryTabsContainer() {
+function QueryTabsContainer({ leftPanelOpen }: { leftPanelOpen: boolean }) {
   const {
     current: { queries, addQuery: addQueryFrame, onQueryDelete },
     history: { addQuery },
   } = useContext(QueryContext);
 
   return (
-    <div className={"resultContainer"}>
+    <div className={`resultContainer${leftPanelOpen ? "" : " large"}`}>
       <div className={"box block"}>
         <FrameCypherEditor onSubmit={addQueryFrame} />
       </div>
       {queries.map((t) => (
-        <div key={t.id} className={"box block"}>
+        <div key={t.id} className={"box no-shadow"}>
           <FrameContainer
             query={t}
             cacheQuery={addQuery}

src/containers/query-tabs/tabs.scss

@@ -1,3 +1,15 @@
 .resultContainer {
   min-height: 100vh;
+  padding-left: 400px;
+  width: 100%; //calc(100vw - 450px);
+
+  transition: padding-left 0.4s ease-in-out;
+
+  &.large {
+    padding-left: 70px;
+  }
+
+  .no-shadow {
+    box-shadow: initial;
+  }
 }

src/containers/schema/SchemaInfoContainer.tsx

@@ -7,7 +7,7 @@ const SchemaInfoContainer: FC = () => {
     <div className={"schemaInfo block"}>
       <div className={"block"}>
         <div className={"title has-text-primary-10-invert"}>Labels</div>
-        <div>
+        <div className={"is-overflow-y-scroll scroll"}>
           {schema.labels?.map((t) => (
             <div className={"tag is-dark"} key={t}>
               {t}
@@ -17,7 +17,7 @@ const SchemaInfoContainer: FC = () => {
       </div>
       <div className={"block"}>
         <div className={"title has-text-primary-10-invert"}>Relationships</div>
-        <div>
+        <div className={"is-overflow-y-scroll scroll"}>
           {schema.relationshipTypes?.map((t) => (
             <div className={"tag is-dark"} key={t}>
               {t}

src/containers/schema/schemaInfo.scss

@@ -2,4 +2,7 @@
   .tag {
     margin: 2px 5px 2px 0;
   }
+  .scroll {
+    max-height: 400px;
+  }
 }

src/containers/sidepanel/LeftPanel.tsx

@@ -4,13 +4,28 @@ import ConnectionStatusSidepanel from "../connection-status-sidepanel/Connection
 import SavedQueriesContainer from "../saved-queries/SavedQueriesContainer";
 import DatabaseContainer from "../database/DatabaseContainer";
 import SchemaInfoContainer from "../schema/SchemaInfoContainer";
-const LeftPanel: React.FC = () => {
+import { Dispatch, SetStateAction, useCallback } from "react";
+const LeftPanel: React.FC<{
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}> = ({ open, setOpen }) => {
   return (
     <div
       className={
-        "leftPanel has-background-primary-05 has-text-primary-20-invert"
+        "leftPanel has-background-primary-05 has-text-primary-20-invert" +
+        (open ? "" : " closed")
       }
     >
+      <div
+        className="open-container"
+        onClick={useCallback(() => {
+          setOpen((t) => !t);
+        }, [setOpen])}
+      >
+        <span className="icon is-medium">
+          <i className={`fas fa-chevron-${open ? "left" : "right"}`}></i>
+        </span>
+      </div>
       <DatabaseContainer />
       <SavedQueriesContainer />
       <SchemaInfoContainer />

src/containers/sidepanel/panel.scss

@@ -0,0 +1,32 @@
+.leftPanel {
+  width: 400px;
+  padding: 20px;
+  height: 100vh;
+  overflow-y: auto;
+  position: fixed;
+  left: 0;
+
+  transition: left 0.4s ease-in-out;
+  &.closed {
+    left: -330px;
+
+    > * {
+      display: none;
+
+      &.open-container {
+        display: initial;
+      }
+    }
+  }
+
+  .open-container {
+    background-color: dodgerblue;
+    display: inline-block;
+    position: absolute;
+    right: 20px;
+    color: white;
+    padding: 2px;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+}