From 82e7a956d31644e8236d453e3d62088400c0bd8f Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 3 Aug 2022 23:46:37 +0200
Subject: [PATCH] tried css to change the background

---
 packages/web/components/templates/Menu.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx
index ab514dc0b..c4fb9bcc1 100644
--- a/packages/web/components/templates/Menu.tsx
+++ b/packages/web/components/templates/Menu.tsx
@@ -5,6 +5,15 @@ import { styled } from '../tokens/stitches.config'
 import { ProSidebar, Menu, MenuItem } from 'react-pro-sidebar'
 import 'react-pro-sidebar/dist/css/styles.css'
 
+// Styles--------------------------------
+
+const MenuStyle = styled(ProSidebar, {
+    display: 'inline-block',
+    //override background to match the design?
+})
+
+// Functions------------------------------
+
 const calculateTodayMenuItem = () => {
   const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60
   //  console.log(timeZoneHourDiff.toLocaleString('en-US', {
@@ -16,15 +25,10 @@ const calculateTodayMenuItem = () => {
 
   return hrefStr
 }
+
 export const Menubar = () => {
   return (
-    <ProSidebar
-      style={{
-        display: 'inline-block',
-        background: '$grayBgActive',
-        height: '100%',
-      }}
-    >
+    <MenuStyle>
       <Menu iconShape="square" popperArrow={true}>
         <MenuItem>
           <Link passHref href={'/home'}>
@@ -45,13 +49,12 @@ export const Menubar = () => {
           <Link passHref href={'/home?q=type%3Ahighlights'}>
             Highlights
           </Link>
-        </MenuItem>
         <MenuItem>
           <Link passHref href={'/home?q=in%3Ainbox+label%3ANewsletter'}>
             Newsletters
           </Link>
         </MenuItem>
       </Menu>
-    </ProSidebar>
+    </MenuStyle>
   )
 }