include tailwind code example

app/pages/PageEnigma/PageEnigma.tsx

@@ -16,6 +16,7 @@ import {
 import { Button } from '~/components/Button';
 import { ButtonLink } from '~/components/ButtonLink';
 import { TopBarInnerContext } from "~/contexts/TopBarInner";
+import { SidePanel } from './comp/SidePanel';
 
 import Editor from './js/editor';
 
@@ -86,14 +87,17 @@ export const PageEnigma = () => {
   return(
     <div>
       <canvas ref={canvasRef} id="video-scene" width="1280px" height="720px" />
-      <div className="absolute top-16 m-2 right-0 bg-ui-panel h-screen w-1/5 pt-20">
+      <SidePanel>
         <Button onClick={handleButtonSave}>Save</Button>
         <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>
         <input style={{ display: 'none' }} type="file" id="load-upload" name="load-upload"></input>
       </div>
-      <div className="bg-ui-panel w-full h-screen">Timeline Panel</div>
     </div>
   );
 }

app/pages/PageEnigma/comp/SidePanel.tsx

@@ -0,0 +1,66 @@
+import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+interface SidePanelPropsI{
+  children: React.ReactNode
+}
+
+export const SidePanel =(props:SidePanelPropsI)=>{
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={setOpen}>
+        <div className="fixed inset-0" />
+
+        <div className="fixed inset-0 overflow-hidden">
+          <div className="absolute inset-0 overflow-hidden">
+            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+              <Transition.Child
+                as={Fragment}
+                enter="transform transition ease-in-out duration-500 sm:duration-700"
+                enterFrom="translate-x-full"
+                enterTo="translate-x-0"
+                leave="transform transition ease-in-out duration-500 sm:duration-700"
+                leaveFrom="translate-x-0"
+                leaveTo="translate-x-full"
+              >
+                <Dialog.Panel className="pointer-events-auto w-screen max-w-2xl">
+                  <div className="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
+                    <div className="px-4 sm:px-6">
+                      <div className="flex items-start justify-between">
+                        <Dialog.Title className="text-base font-semibold leading-6 text-gray-900">
+                          Panel title
+                        </Dialog.Title>
+                        <div className="ml-3 flex h-7 items-center">
+                          <button
+                            type="button"
+                            className="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                            onClick={() => setOpen(false)}
+                          >
+                            <span className="absolute -inset-2.5" />
+                            <span className="sr-only">Close panel</span>
+                            <FontAwesomeIcon
+                              className="h-6 w-6"
+                              aria-hidden="true"
+                              icon={faXmark}
+                            />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="relative mt-6 flex-1 px-4 sm:px-6">
+                      {props.children}
+                    </div>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}

app/root.tsx

@@ -39,10 +39,10 @@ export default function App() {
             TopBarInner: topBarInnerComponent,
             setTopBarInner: setTopBarInnerComponent
           }}>
-          <TopBar />
+          
           <div className="h-10 m-4 w-screen"/>
           <Outlet />
-          
+          <TopBar />
         </TopBarInnerContext.Provider>
         <ScrollRestoration />
         <Scripts />