Added Menu on the home page with static items

packages/web/components/templates/Menu.tsx

@@ -1,32 +1,21 @@
 import React, { ReactNode } from 'react'
+import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar'
+import 'react-pro-sidebar/dist/css/styles.css'
 
 //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)
+export const Menubar = () => {
   return (
     <>
-      {/* <nav id="menu">
-        <header>
-          <h2>Menu</h2>
-        </header>
-      </nav>
-
-      <main id="panel">
-        <header>
-          <h2>Panel</h2>
-        </header>
-      </main> */}
+      <ProSidebar style={{display: 'inline-block'}}>
+        <Menu iconShape="square" popperArrow={true}>
+          <MenuItem>Home</MenuItem>
+            <MenuItem>Today</MenuItem>
+            <MenuItem>Read Later</MenuItem>
+            <MenuItem>Highlights</MenuItem>
+            <MenuItem>NewsLetters</MenuItem>
+        </Menu>
+      </ProSidebar>
     </>
   )
 }

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -661,7 +661,8 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         alignment="center"
         css={{
           px: '$3',
-          width: '100%',
+          width: '75%',
+          display: 'inline-flex',
           '@smDown': {
             px: '$2',
           },

packages/web/package.json

@@ -38,12 +38,12 @@
     "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",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
+    "react-pro-sidebar": "^0.7.1",
     "react-super-responsive-table": "^5.2.1",
     "react-topbar-progress-indicator": "^4.1.1",
     "react-twitter-widgets": "^1.10.0",

packages/web/pages/home.tsx

@@ -2,6 +2,7 @@ import { PrimaryLayout } from '../components/templates/PrimaryLayout'
 import { HomeFeedContainer } from '../components/templates/homeFeed/HomeFeedContainer'
 import { VStack } from './../components/elements/LayoutPrimitives'
 import { useRef } from 'react'
+import { Menubar } from '../components/templates/Menu'
 
 export default function Home(): JSX.Element {
   return <LoadedContent />
@@ -9,16 +10,17 @@ export default function Home(): JSX.Element {
 
 function LoadedContent(): JSX.Element {
   return (
-    <PrimaryLayout
-      pageMetaDataProps={{
-        title: 'Home - Omnivore',
-        path: '/home',
-      }}
-      pageTestId="home-page-tag"
-    >
-      <VStack alignment="center" distribution="center">
+    <>
+      <PrimaryLayout
+        pageMetaDataProps={{
+          title: 'Home - Omnivore',
+          path: '/home',
+        }}
+        pageTestId="home-page-tag"
+      >
+        <Menubar />
         <HomeFeedContainer />
-      </VStack>
-    </PrimaryLayout>
+      </PrimaryLayout>
+    </>
   )
 }

packages/web/stories/Menu.stories.tsx

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