wip: Started working on new development environment

packages/freesewing.shared/components/workbench/menu.js

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import orderBy from 'lodash.orderby'
+import OptionsIcon from 'shared/components/icons/options.js'
+import SettingsIcon from 'shared/components/icons/settings.js'
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+
+const structure = (pattern, app) => ({
+  modes: [
+    { title: `Draft ${pattern.config.name}`, action: '' },
+  ],
+  options: [
+    { title: `Draft ${pattern.config.name}`, action: '' },
+  ],
+  settings: [
+    { title: `Draft ${pattern.config.name}`, action: '' },
+  ],
+})
+
+const TopLevel = ({ icon, title }) => (
+  <details className='py-1'>
+    <summary className={`
+      flex flex-row uppercase gap-4 font-bold text-lg
+      hover:cursor-row-resize
+      p-2
+      text-base-content
+      sm:text-neutral-content
+      items-center
+    `}>
+      <span className="text-secondary-focus mr-4">{icon}</span>
+      <span className={`grow ${linkClasses}`}>
+        {title}
+      </span>
+      <Chevron />
+    </summary>
+    fixme
+  </details>
+)
+
+const Menu = ({ app, pattern }) => ([
+  <TopLevel key='a' title='Toggles' icon={<OptionsIcon />} pattern={pattern} />,
+  <TopLevel key='b' title='Modes' icon={<OptionsIcon />} pattern={pattern} />,
+  <TopLevel key='c' title='Design Options' icon={<OptionsIcon />} pattern={pattern} />,
+  <TopLevel key='d' title='Pattern Settings' icon={<SettingsIcon />} pattern={pattern} />,
+])
+
+const WorkbenchMenu = ({ app, pattern }) => (
+  <nav className="smmax-w-96 grow mb-12">
+    <Menu app={app} pattern={pattern} />
+  </nav>
+)
+
+export default WorkbenchMenu