From 369ee8570f6cc49616984368da209dcd73ed5fca Mon Sep 17 00:00:00 2001
From: dev <test@local.host>
Date: Thu, 21 Mar 2024 17:47:50 -0400
Subject: [PATCH] testing side pnael transition

---
 app/pages/PageCube/PageCube.tsx         | 21 +++++++++++++++------
 app/pages/PageEnigma/PageEnigma.tsx     |  1 -
 app/pages/PageEnigma/comp/SidePanel.tsx | 20 ++++++++++++++++++--
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/app/pages/PageCube/PageCube.tsx b/app/pages/PageCube/PageCube.tsx
index 12c5938ef5..fc0a60153d 100644
--- a/app/pages/PageCube/PageCube.tsx
+++ b/app/pages/PageCube/PageCube.tsx
@@ -15,6 +15,8 @@ import { Button } from '~/components/Button';
 import { ButtonLink } from '~/components/ButtonLink';
 import { TopBarInnerContext } from "~/contexts/TopBarInner";
 
+import { SidePanel } from '../PageEnigma/comp/SidePanel';
+
 import { SceneWithCube } from './SceneWithCube';
 
 export const PageCube = () => {
@@ -74,12 +76,19 @@ export const PageCube = () => {
   },[setTopBarInner]);
 
   return (
-    <>
-      <div className="Cube" ref={mountRef} />
-      <Button onClick={toggleStopped}> STOP </Button>
-      <p>{rotationX ? rotationX : ""}</p>
-      <p>{rotationY ? rotationY : ""}</p>
-    </>
+    <div className="grid grid-cols-12 gap-2	">
+      <div className="col-span-6	">
+        <div className="Cube" ref={mountRef} />
+      </div>
+      <div className="col-span-6	">
+        <Button onClick={toggleStopped}> STOP </Button>
+        <p className='text-white'>{rotationX ? rotationX : ""}</p>
+        <p className='text-white'>{rotationY ? rotationY : ""}</p>
+      </div>
+      <SidePanel>
+        <p>Side Panel Text</p>
+      </SidePanel>
+    </div>
   );
 
 };
\ No newline at end of file
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index dcf7cc2f00..fda7672046 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -92,7 +92,6 @@ export const PageEnigma = () => {
         <Button onClick={handleButtonLoad}>Load</Button>
         <Button onClick={handleButtonRender}>Render</Button>
         <Button onClick={handleButtonPlay}>Play</Button>
-        
       </SidePanel>
       <div className="bg-ui-panel w-full h-screen">
         <p className='text-white'>Timeline Panel</p>
diff --git a/app/pages/PageEnigma/comp/SidePanel.tsx b/app/pages/PageEnigma/comp/SidePanel.tsx
index 48fa6c14b6..bf749cd6cd 100644
--- a/app/pages/PageEnigma/comp/SidePanel.tsx
+++ b/app/pages/PageEnigma/comp/SidePanel.tsx
@@ -1,15 +1,31 @@
 import { Fragment, useState } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import {
+  faXmark,
+  faGears,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { Button } from '~/components/Button';
 interface SidePanelPropsI{
   children: React.ReactNode
 }
 
 export const SidePanel =(props:SidePanelPropsI)=>{
   const [open, setOpen] = useState(true)
-
+  const handleOpen = ()=>{
+    setOpen(true);
+  }
+  if(!open){
+    return(
+      <Button 
+        className='fixed right-0 top-20'
+        onClick={handleOpen}
+      >
+        <FontAwesomeIcon icon={faGears} />
+      </Button>
+    );
+  }
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={setOpen}>