basic mobile support for view nav

sites/shared/components/workbench/header.mjs

@@ -18,6 +18,7 @@ import {
   MeasieIcon,
 } from 'shared/components/icons.mjs'
 import Link from 'next/link'
+import { MenuWrapper } from 'shared/components/workbench/menus/shared/menu-wrapper.mjs'
 
 export const ns = ['workbench', 'sections']
 
@@ -147,24 +148,30 @@ const NavIcons = ({ setView, setDense, dense, view }) => {
 export const WorkbenchHeader = ({ view, setView }) => {
   const [dense, setDense] = useState(true)
   return (
-    <header
-      className={`
-      h-full w-64 min-h-screen pt-4
-      bg-neutral
+    <MenuWrapper
+      Icon={BeakerIcon}
+      wrapperClass={`h-full w-64 min-h-screen pt-4
+        bg-neutral
 
-      transition-all
-      drop-shadow-xl
-      ${dense ? '-ml-52' : 'ml-0'}
-      group
-    `}
+        transition-all
+        drop-shadow-xl
+        ${dense ? '-ml-52' : 'ml-0'}`}
+      buttonClass={`right-0 bottom-28`}
     >
-      <div
+      <header
         className={`
-      flex flex-col
-      items-center w-full sticky top-4 lg:top-28`}
+        sticky top-4 lg:top-28
+        group
+      `}
       >
-        <NavIcons {...{ setView, setDense, dense, view }} />
-      </div>
-    </header>
+        <div
+          className={`
+        flex flex-col
+        items-center w-full `}
+        >
+          <NavIcons {...{ setView, setDense, dense, view }} />
+        </div>
+      </header>
+    </MenuWrapper>
   )
 }

sites/shared/components/workbench/menus/shared/menu-wrapper.mjs

@@ -4,7 +4,14 @@ import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { CloseIcon, WrenchIcon } from 'shared/components/icons.mjs'
 import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
 
-export const MenuWrapper = ({ children }) => {
+const defaultClasses = 'w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll'
+const defaultButtonClasses = ' bottom-12 right-0'
+export const MenuWrapper = ({
+  children,
+  wrapperClass = defaultClasses,
+  buttonClass = defaultButtonClasses,
+  Icon = WrenchIcon,
+}) => {
   const { setModal, clearModal, modalContent } = useContext(ModalContext)
   const [modalOpen, setModalOpen] = useState(false)
 
@@ -47,14 +54,12 @@ export const MenuWrapper = ({ children }) => {
   return (
     <>
       <button
-        className={`btn btn-primary btn-circle sticky  m-4 bottom-16 self-end lg:hidden`}
+        className={`btn btn-primary btn-circle m-4 z-20 lg:hidden ${buttonClass} absolute`}
         onClick={onClick}
       >
-        <WrenchIcon />{' '}
+        <Icon />{' '}
       </button>
-      <div className="hidden lg:block w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll">
-        {children}
-      </div>
+      <div className={`hidden lg:block ${wrapperClass}`}>{children}</div>
     </>
   )
 }

sites/shared/components/workbench/new.mjs

@@ -193,9 +193,7 @@ export const Workbench = ({ design, Design, DynamicDocs }) => {
 
   return (
     <div className="flex flex-row">
-      <div className="grow-no shrink-no">
-        <WorkbenchHeader {...{ view, setView, update }} />
-      </div>
+      <WorkbenchHeader {...{ view, setView, update }} />
       <div className="grow">{viewContent}</div>
     </div>
   )