testing side pnael transition

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>
   );
 
 };

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>

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}>