Menu Component Start

packages/web/components/templates/Menu.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react'
+
+//import { useRouter } from 'next/router'
+
+type MenuItem = {
+  name: string
+  action?: () => void
+  url?: string
+}
+type MenuProps = {
+  items: Array<MenuItem>
+}
+
+export const Menu = ({ items }: MenuProps) => {
+  //const router = useRouter()
+  console.log(items)
+  return (
+    <>
+      {/* <nav id="menu">
+        <header>
+          <h2>Menu</h2>
+        </header>
+      </nav>
+
+      <main id="panel">
+        <header>
+          <h2>Panel</h2>
+        </header>
+      </main> */}
+    </>
+  )
+}

packages/web/package.json

@@ -38,6 +38,7 @@
     "next": "^12.1.0",
     "phosphor-react": "^1.4.0",
     "pspdfkit": "^2022.2.3",
+    "pulling": "^2.0.1",
     "react": "^17.0.2",
     "react-apple-login": "^1.1.3",
     "react-colorful": "^5.5.1",

packages/web/stories/Menu.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+//import { updateThemeLocally } from '../lib/themeUpdater'
+//import { ThemeId } from '../components/tokens/stitches.config'
+import { Menu } from '../components/templates/Menu'
+
+export default {
+  title: 'Components/Menu',
+  component: Menu,
+  argTypes: {
+    item: {
+      description: 'Menu Item',
+    },
+    action: {
+      description: 'Action that fires on click.',
+    },
+    url: {
+      description: 'going to a specific link',
+    },
+  },
+} as ComponentMeta<typeof Menu>
+
+const Template: ComponentStory<typeof Menu> = (args) => (
+  <Menu {...args}>{args.items[0]}</Menu>
+)
+
+export const MenuStory = Template.bind({})
+MenuStory.args = {
+  items: [{ name: 'Home' }],
+}