wip(fs.lab): Work on workbench components

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

@@ -3,51 +3,111 @@ 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 MenuIcon from 'shared/components/icons/menu.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: '' },
-  ],
+// Component that renders a sublevel of navigation
+const ModeButtons = props => props.children.length === 0
+  ? null
+  : (
+    <ul className="pl-5 list-inside">
+      {props.children.map(mode => (
+        <li key={mode.title} className="flex flex-row">
+          <button title={mode.title} className={`
+            grow pl-2 border-l-2
+            ${linkClasses}
+            hover:border-secondary
+            sm:hover:border-secondary-focus
+            text-left
+            ${mode.name === props.mode
+              ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
+              : 'text-base-content sm:text-neutral-content'
+            }
+          `}>
+            <span className={`
+              text-3xl mr-2 inline-block p-0 leading-3
+              ${mode.name === props.mode
+                ? 'text-secondary sm:text-secondary-focus translate-y-1'
+                : 'translate-y-3'
+              }
+            `}>
+              {mode.name === props.mode ? <>&bull;</> : <>&deg;</>}
+            </span>
+            <span className={mode.name === props.mode ? 'font-bold' : ''}>
+              { mode.title }
+            </span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+
+const groupMaker = (t, setMode, pattern) => ({
+  modes: {
+    icon: <MenuIcon />,
+    title: t('app.modes'),
+    children: [
+      {
+        name: 'measurements',
+        title: t('app.measurements'),
+        onClick: () => setMode('measurements')
+      },
+      {
+        name: 'draft',
+        title: t('app.draftThing', { thing: pattern }),
+        onClick: () => setMode('draft')
+      },
+      {
+        name: 'test',
+        title: t('app.testThing', { thing: pattern }),
+        onClick: () => setMode('test')
+      },
+      {
+        name: 'export',
+        title: t('app.export'),
+        onClick: () => setMode('export')
+      },
+    ]
+  },
+  toggles: {
+    icon: <OptionsIcon />,
+    title: `${t('cfp.turnOn')} / ${t('cfp.turnOff')}`,
+  },
+  options: {
+    icon: <OptionsIcon />,
+    title: t('app.designOptions'),
+  },
+  settings: {
+    icon: <SettingsIcon />,
+    title: t('app.settings')
+  },
 })
 
-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>
-)
+const WorkbenchMenu = props => {
+  const groups = groupMaker(props.app.t, props.setMode, props.pattern)
+  return (
+    <nav className="smmax-w-96 grow mb-12">
+      {Object.keys(groups).map(group => (
+        <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
+          `} open={'modes' === group}>
+            <span className="text-secondary-focus mr-4">{groups[group].icon}</span>
+            <span className={`grow ${linkClasses}`}>
+              {groups[group].title}
+            </span>
+            <Chevron />
+          </summary>
+          {group === 'modes' && <ModeButtons {...props} {...groups[group]} />}
+        </details>
+      ))}
+    </nav>
+  )
+}
 
 export default WorkbenchMenu