From 42ee36d8d94be9f7299454d437224054a55d0352 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 15 Aug 2022 18:46:29 -0500
Subject: [PATCH 1/2] Adding background color to active item and cleaning up

---
 packages/web/styles/menu.css | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css
index e711cdca9..607f3f0b6 100644
--- a/packages/web/styles/menu.css
+++ b/packages/web/styles/menu.css
@@ -1,30 +1,32 @@
 /* Menu Override styles */
 
-.pro-sidebar > .pro-sidebar-inner, .pro-sidebar .pro-menu a {
-  background-color: var(--colors-libraryBackground);
-  color: var(--colors-utilityTextDefault);
-}
-
-.pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item {
-  color: var(--colors-utilityTextDefault);
+.pro-sidebar > .pro-sidebar-inner,
+.pro-menu,
+.pro-menu > ul > .pro-sub-menu > .pro-inner-list-item,
+.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item {
   background-color: var(--colors-libraryBackground);
 }
 
+.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item,
+.pro-sidebar .pro-menu-item .pro-sub-menu .pro-inner-item,
+.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-item-content,
+.pro-sidebar .pro-menu a,
 .pro-sidebar .pro-menu a:hover {
   color: var(--colors-utilityTextDefault);
 }
 
-.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item {
-  padding: 8px 20px 3px 20px;
+.pro-menu .pro-menu-item > .pro-inner-item {
+  padding: 5px 20px;
 }
 
-/* .pro-sidebar .pro-menu .active > .pro-inner-item {
-  background-color: #F8F8F8;
-  border-radius: 8px;
-} */
-
 .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-icon-wrapper {
   width: 20px;
   min-width: 0;
   height: 25px;
 }
+
+.pro-sidebar .pro-menu .pro-menu-item.active {
+  background-color: var(--colors-libraryActiveMenuItem);
+  width: 90%;
+  border-radius: 5px;
+}

From dfca5d1be7537a7e804203c2a574597f5f94fac4 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 15 Aug 2022 19:02:13 -0500
Subject: [PATCH 2/2] adding the active status to the menu items

---
 packages/web/components/templates/Menu.tsx | 75 ++++++++++++----------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx
index 1575a883c..7ac25a9f8 100644
--- a/packages/web/components/templates/Menu.tsx
+++ b/packages/web/components/templates/Menu.tsx
@@ -73,6 +73,7 @@ export const Menubar = () => {
 
   const [menuList, setMenuList] = useState<Array<MenuItems>>([])
   const [dynamicMenuItems, setDynamicMenuItems] = useState<DynamicMenuItems>({})
+  const [activeItem, setActiveItem] = useState<string>('Home')
 
   useEffect(() => {
     if (labels || subscriptions) {
@@ -84,7 +85,6 @@ export const Menubar = () => {
         query: 'in:inbox',
         icon: null,
         href: '/home',
-        active: true,
       },
       {
         label: 'Today',
@@ -111,7 +111,7 @@ export const Menubar = () => {
         href: `?q=in:inbox+label:Newsletter`,
       },
     ])
-  },[labels, subscriptions])
+  }, [labels, subscriptions])
 
   return (
     <ProSidebar style={proSideBarStyles} breakPoint={'sm'}>
@@ -122,7 +122,10 @@ export const Menubar = () => {
               <MenuItem
                 key={item.label}
                 icon={item.icon}
-                active={item.active ?? false}
+                active={activeItem === item.label}
+                onClick={() => {
+                  setActiveItem(item.label)
+                }}
               >
                 <Link passHref href={item.href}>
                   {item.label}
@@ -130,44 +133,46 @@ export const Menubar = () => {
               </MenuItem>
             )
           })}
-          {dynamicMenuItems.labels &&
-            <SubMenu
-              key="labels-list"
-              title="Labels"
-            >
-              {dynamicMenuItems.labels.map((item: MenuItems) => {
-                return (<MenuItem
+        {dynamicMenuItems.labels && (
+          <SubMenu key="labels-list" title="Labels">
+            {dynamicMenuItems.labels.map((item: MenuItems) => {
+              return (
+                <MenuItem
                   key={item.label}
                   icon={item.icon}
-                  active={item.active ?? false}
+                  active={activeItem === item.label}
+                  onClick={() => {
+                    setActiveItem(item.label)
+                  }}
                 >
                   <Link passHref href={item.href}>
                     {item.label}
                   </Link>
-                </MenuItem>)
-              })}
-            </SubMenu>
-          }
-          {dynamicMenuItems.subscriptions &&
-            <SubMenu
-              key="subscriptions-list"
-              title="Subscriptions"
-            >
-              {dynamicMenuItems.subscriptions.map((item: MenuItems) => {
-                return (
-                  <MenuItem
-                    key={item.label}
-                    icon={item.icon}
-                    active={item.active ?? false}
-                  >
-                    <Link passHref href={item.href}>
-                      {item.label}
-                    </Link>
-                  </MenuItem>
-                )
-              })}
-            </SubMenu>
-          }
+                </MenuItem>
+              )
+            })}
+          </SubMenu>
+        )}
+        {dynamicMenuItems.subscriptions && (
+          <SubMenu key="subscriptions-list" title="Subscriptions">
+            {dynamicMenuItems.subscriptions.map((item: MenuItems) => {
+              return (
+                <MenuItem
+                  key={item.label}
+                  icon={item.icon}
+                  active={activeItem === item.label}
+                  onClick={() => {
+                    setActiveItem(item.label)
+                  }}
+                >
+                  <Link passHref href={item.href}>
+                    {item.label}
+                  </Link>
+                </MenuItem>
+              )
+            })}
+          </SubMenu>
+        )}
       </Menu>
     </ProSidebar>
   )