prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

adding the active status to the menu items

Browse source
This commit is contained in:
Rupin Khandelwal 2022-08-15 19:02:13 -05:00
parent 42ee36d8d9
commit dfca5d1be7
1 changed files with 40 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
packages/web/components/templates/Menu.tsx
View file

@ -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>
)