toggle sidebar using context

aBgAmeuR · Oct 19, 2023 · c5dbd2e · c5dbd2e
1 parent 84e8e8d
commit c5dbd2e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,16 +1,33 @@
 "use client";
 
+import React from "react";
 import { ReactFlowProvider } from "reactflow";
 import { AppBar } from "@/components/Editor/AppBar";
 import { Editor } from "@/components/Editor/Editor";
+import { createContext, useState } from 'react';
+
+interface AppContextInterface {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => boolean;
+}
+export const ContextDefaultValue: AppContextInterface = {
+  isOpen: true,
+  setIsOpen: () => true
+}
+export const SidebarContext = createContext(ContextDefaultValue);
 
 export default function EditPage() {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const value = { isOpen, setIsOpen }
+
   return (
     <>
-      <ReactFlowProvider>
-        <AppBar />
-        <Editor />
-      </ReactFlowProvider>   
+      <SidebarContext.Provider value={value}>
+        <ReactFlowProvider>
+          <AppBar />
+          <Editor />
+        </ReactFlowProvider>
+      </SidebarContext.Provider>
     </>
   )
 }
diff --git a/components/Editor/AppBar.tsx b/components/Editor/AppBar.tsx
@@ -1,16 +1,20 @@
-import { Save } from "lucide-react";
+import { Save, Layout } from "lucide-react";
 import { ThemeToggle } from "../theme-toggle";
 import { Icons } from "../icons";
 import { siteConfig } from "@/config/site";
+import { useContext } from "react";
+import { SidebarContext } from "@/app/page";
 
 export function AppBar() {
+  let { isOpen, setIsOpen } = useContext(SidebarContext);
+
   return (
     <div className="flex h-14 w-screen flex-row items-center justify-between border-b border-neutral-100 bg-white p-2 px-4 dark:border-white/5 dark:bg-neutral-900">
       <div className="w-1/3">
-      <div className="flex items-center space-x-2">
-        <Icons.logo className="h-6 w-6" />
-        <span className="inline-block font-bold">{siteConfig.name}</span>
-      </div>
+        <div className="flex items-center space-x-2">
+          <Icons.logo className="h-6 w-6" />
+          <span className="inline-block font-bold">{siteConfig.name}</span>
+        </div>
       </div>
       <div className="flex w-1/3 items-center justify-center">
         <input
@@ -23,6 +27,9 @@ export function AppBar() {
         {/* <button className="rounded bg-neutral-100 p-2 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400">
           <Save size={18} strokeWidth={2} />
         </button> */}
+        <button className="rounded bg-neutral-100 p-2 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400" onClick={e => setIsOpen(!isOpen)}>
+          <Layout size={18} strokeWidth={2} />
+        </button>
         <ThemeToggle />
       </div>
     </div>

diff --git a/components/Editor/OptionBar/index.tsx b/components/Editor/OptionBar/index.tsx
@@ -2,7 +2,8 @@ import { BackgroundVariant, Edge, MarkerType, Node, useOnSelectionChange } from
 import { ClassOptions } from "./Class";
 import { DefaultOptions } from "./Default";
 import { EdgeOptions } from "./Edge";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
+import { SidebarContext } from "@/app/page";
 
 interface OptionBarProps {
   editNode: (id: string, newData: any) => void;
@@ -13,9 +14,10 @@ interface OptionBarProps {
 
 export function OptionBar({ editNode, setBgVariant, editEdge, deleteEdge }: OptionBarProps) {
   const [entitySelected, setEntitySelected] = useState<Node | Edge | null>(null);
+  let { isOpen } = useContext(SidebarContext);
 
   useOnSelectionChange({
-    onChange: (e) => {      
+    onChange: (e) => {
       const node = e.nodes[0];
       const edge = e.edges[0];
       if (entitySelected?.type === "floating" && !node) return;
@@ -36,7 +38,7 @@ export function OptionBar({ editNode, setBgVariant, editEdge, deleteEdge }: Opti
   }
 
   return (
-    <div className="flex w-[400px] flex-col border-l border-neutral-100 p-4 dark:border-white/5">
+    <div className={`flex ${isOpen ? 'w-[400px]' : 'hidden'} flex-col border-l border-neutral-100 p-4 dark:border-white/5`}>
       {getOptions()}
     </div>
   )