diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx index 94d570eda..42d5e01d4 100644 --- a/packages/web/components/templates/Menu.tsx +++ b/packages/web/components/templates/Menu.tsx @@ -21,6 +21,11 @@ type MenuItems = { href: string } +type DynamicMenuItems = { + labels?: MenuItems[] + subscriptions?: MenuItems[] +} + // Functions const calculateTodayMenuItem = () => { const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 @@ -58,7 +63,7 @@ const createDynamicMenuItems = ( }) ) } - return [{ labels: [...labelsList], subscriptions: [...subscriptionsList] }] + return { labels: [...labelsList], subscriptions: [...subscriptionsList] } } // Component @@ -67,9 +72,7 @@ export const Menubar = () => { const { subscriptions } = useGetSubscriptionsQuery() const [menuList, setMenuList] = useState>([]) - const [dynamicMenuItems, setDynamicMenuItems] = useState>([ - { labels: Array(), subscriptions: Array() }, - ]) + const [dynamicMenuItems, setDynamicMenuItems] = useState({}) useEffect(() => { if (labels || subscriptions) { @@ -127,14 +130,13 @@ export const Menubar = () => { ) })} - {dynamicMenuItems.length > 0 && - dynamicMenuItems[0].labelsList.map((item: MenuItems) => { - return ( - - + {dynamicMenuItems.labels.map((item: MenuItems) => { + return ( { {item.label} - - - ) - })} - {dynamicMenuItems.length > 0 && - dynamicMenuItems[0].subscriptionsList.map((item: MenuItems) => { - return ( - - - - {item.label} - - - - ) - })} + ) + })} + + } + {dynamicMenuItems.subscriptions && + + {dynamicMenuItems.subscriptions.map((item: MenuItems) => { + return ( + + + {item.label} + + + ) + })} + + } ) diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css index bb266b231..e711cdca9 100644 --- a/packages/web/styles/menu.css +++ b/packages/web/styles/menu.css @@ -5,6 +5,11 @@ 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 { color: var(--colors-utilityTextDefault); }