Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use a single dictionary for labels and subscriptions

Browse Source
This commit is contained in:
Jackson Harper
2022-08-12 11:47:32 +08:00
parent 5e5ed35687
commit e4a66f8f9e
2 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/web/components/templates/Menu.tsx
View File

@ -21,6 +21,11 @@ type MenuItems = {
href: string href: string
} }
type DynamicMenuItems = {
labels?: MenuItems[]
subscriptions?: MenuItems[]
}
// Functions // Functions
const calculateTodayMenuItem = () => { const calculateTodayMenuItem = () => {
const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60
@ -58,7 +63,7 @@ const createDynamicMenuItems = (
}) })
) )
} }
return [{ labels: [...labelsList], subscriptions: [...subscriptionsList] }] return { labels: [...labelsList], subscriptions: [...subscriptionsList] }
} }
// Component // Component
@ -67,9 +72,7 @@ export const Menubar = () => {
const { subscriptions } = useGetSubscriptionsQuery() const { subscriptions } = useGetSubscriptionsQuery()
const [menuList, setMenuList] = useState<Array<MenuItems>>([]) const [menuList, setMenuList] = useState<Array<MenuItems>>([])
const [dynamicMenuItems, setDynamicMenuItems] = useState<Array<any>>([ const [dynamicMenuItems, setDynamicMenuItems] = useState<DynamicMenuItems>({})
{ labels: Array<MenuItems>(), subscriptions: Array<MenuItems>() },
])
useEffect(() => { useEffect(() => {
if (labels || subscriptions) { if (labels || subscriptions) {
@ -127,14 +130,13 @@ export const Menubar = () => {
</MenuItem> </MenuItem>
) )
})} })}
{dynamicMenuItems.length > 0 && {dynamicMenuItems.labels &&
dynamicMenuItems[0].labelsList.map((item: MenuItems) => { <SubMenu
return ( key="labels-list"
<SubMenu title="Labels"
key={dynamicMenuItems[0].labelsList} >
title={dynamicMenuItems[0].labelsList} {dynamicMenuItems.labels.map((item: MenuItems) => {
> return (<MenuItem
<MenuItem
key={item.label} key={item.label}
icon={item.icon} icon={item.icon}
active={item.active ?? false} active={item.active ?? false}
@ -142,29 +144,30 @@ export const Menubar = () => {
<Link passHref href={item.href}> <Link passHref href={item.href}>
{item.label} {item.label}
</Link> </Link>
</MenuItem> </MenuItem>)
</SubMenu> })}
) </SubMenu>
})} }
{dynamicMenuItems.length > 0 && {dynamicMenuItems.subscriptions &&
dynamicMenuItems[0].subscriptionsList.map((item: MenuItems) => { <SubMenu
return ( key="subscriptions-list"
<SubMenu title="Subscriptions"
key={dynamicMenuItems[0].subscriptionList} >
title={dynamicMenuItems[0].subscriptionList} {dynamicMenuItems.subscriptions.map((item: MenuItems) => {
> return (
<MenuItem <MenuItem
key={item.label} key={item.label}
icon={item.icon} icon={item.icon}
active={item.active ?? false} active={item.active ?? false}
> >
<Link passHref href={item.href}> <Link passHref href={item.href}>
{item.label} {item.label}
</Link> </Link>
</MenuItem> </MenuItem>
</SubMenu> )
) })}
})} </SubMenu>
}
</Menu> </Menu>
</ProSidebar> </ProSidebar>
) )

5
packages/web/styles/menu.css
View File

@ -5,6 +5,11 @@
color: var(--colors-utilityTextDefault); color: var(--colors-utilityTextDefault);
} }
.pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item {
color: var(--colors-utilityTextDefault);
background-color: var(--colors-libraryBackground);
}
.pro-sidebar .pro-menu a:hover { .pro-sidebar .pro-menu a:hover {
color: var(--colors-utilityTextDefault); color: var(--colors-utilityTextDefault);
} }