Make Tweaks closable

1 files changed, 9 insertions, 4 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index e0619ba..04f1fc7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -178,6 +178,7 @@ export function GraphPage() {
   }, [])
 
   const [threeDim, setThreeDim] = useState(false)
+  const [showTweeks, setShowTweeks] = useState(true)
 
   if (!graphData) {
     return null
@@ -185,13 +186,16 @@ export function GraphPage() {
 
   return (
     <div>
-      <Tweaks
+      {showTweeks && <Tweaks
         {...{
           physics,
           setPhysics,
           threeDim,
         }}
-      />
+        onClose={() => {
+          setShowTweeks(false)
+        }}
+      />}
       <Graph
         nodeById={nodeByIdRef.current!}
         linksByNodeId={linksByNodeIdRef.current!}
@@ -282,9 +286,10 @@ export interface TweakProps {
   physics: typeof initialPhysics
   setPhysics: any
   threeDim: boolean
+  onClose: () => void
 }
 export const Tweaks = function (props: TweakProps) {
-  const { physics, setPhysics, threeDim } = props
+  const { physics, setPhysics, threeDim, onClose } = props
   return (
     <Box
       zIndex="overlay"
@@ -305,7 +310,7 @@ export const Tweaks = function (props: TweakProps) {
             onClick={() => setPhysics(initialPhysics)}
           />
         </Tooltip>
-        <CloseButton />
+        <CloseButton onClick={onClose} />
       </Box>
       <Accordion allowMultiple defaultIndex={[0]} allowToggle>
         <AccordionItem>