make panel toggle floating

website/src/repl/components/Header.jsx

@@ -1,19 +1,16 @@
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
 import cx from '@src/cx.mjs';
-import { useSettings, setIsZen, setIsPanelOpened } from '../../settings.mjs';
+import { useSettings, setIsZen } from '../../settings.mjs';
 import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon';
 import '../Repl.css';
-import { Bars3Icon } from '@heroicons/react/16/solid';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
-export function Header({ context, embedded = false }) {
-  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShuffle, handleShare } =
-    context;
-  const isEmbedded = typeof window !== 'undefined' && (embedded || window.location !== window.parent.location);
-  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily, isPanelOpen, panelPosition } = useSettings();
+export function Header({ context, isEmbedded = false }) {
+  const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context;
+  const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings();
 
   return (
     <header
@@ -114,21 +111,6 @@ export function Header({ context, embedded = false }) {
           </div>
         )}
       </div>
-      <div>
-        {!isEmbedded && !isZen && panelPosition === 'right' && (
-          <button
-            title="share"
-            className={cx(
-              'cursor-pointer hover:opacity-50 flex items-center space-x-1 pr-3 text-foreground',
-              // isPanelOpen && 'opacity-0',
-            )}
-            onClick={() => setIsPanelOpened(!isPanelOpen)}
-          >
-            {/* <span>menu</span> */}
-            <Bars3Icon className="w-5 h-5" />
-          </button>
-        )}
-      </div>
     </header>
   );
 }

website/src/repl/components/ReplEditor.jsx

@@ -1,5 +1,5 @@
 import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
+import { HorizontalPanel, VerticalPanel, PanelToggle } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { Header } from './Header';
@@ -14,14 +14,17 @@ export default function ReplEditor(Props) {
   const { containerRef, editorRef, error, init, pending } = context;
   const settings = useSettings();
   const { panelPosition, isZen } = settings;
+  const isEmbedded = typeof window !== 'undefined' && window.location !== window.parent.location;
 
   return (
     <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
-      <Header context={context} />
+      <Header context={context} isEmbedded={isEmbedded} />
+
       <div className="grow flex relative overflow-hidden">
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
         {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
+        <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
       </div>
       <UserFacingErrorMessage error={error} />
       {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}

website/src/repl/components/panel/Panel.jsx

@@ -8,7 +8,7 @@ import { SoundsTab } from './SoundsTab';
 import { useLogger } from '../useLogger';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
-import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/16/solid';
 import ExportTab from './ExportTab';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
@@ -17,7 +17,11 @@ function PanelCloseButton() {
   const { isPanelOpen } = useSettings();
   return (
     isPanelOpen && (
-      <button onClick={() => setIsPanelOpened(false)} className={cx('text-foreground px-2')} aria-label="Close Menu">
+      <button
+        onClick={() => setIsPanelOpened(false)}
+        className={cx('px-4 py-2 text-foreground hover:opacity-50')}
+        aria-label="Close Menu"
+      >
         <XMarkIcon className="w-6 h-6" />
       </button>
     )
@@ -142,7 +146,7 @@ function PanelTab({ label, isSelected, onClick }) {
 function Tabs({ className }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
-    <div className={cx('flex select-none max-w-full overflow-auto', className)}>
+    <div className={cx('flex select-none max-w-full overflow-auto items-center', className)}>
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
         return <PanelTab key={key} isSelected={tab === val && isPanelOpen} label={key} onClick={() => setTab(val)} />;
@@ -150,3 +154,23 @@ function Tabs({ className }) {
     </div>
   );
 }
+
+export function PanelToggle({ isEmbedded, isZen }) {
+  const { panelPosition, isPanelOpen } = useSettings();
+  return (
+    !isEmbedded &&
+    !isZen &&
+    panelPosition === 'right' && (
+      <button
+        title="share"
+        className={cx(
+          'top-0 px-4 py-2 bg-background right-0 absolute z-[1000] cursor-pointer hover:opacity-50 flex justify-center items-center space-x-1 text-foreground ',
+          isPanelOpen && 'hidden',
+        )}
+        onClick={() => setIsPanelOpened(!isPanelOpen)}
+      >
+        <Bars3Icon className="w-6 h-6" />
+      </button>
+    )
+  );
+}