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

Merge pull request #1088 from omnivore-app/1075

Browse source 
Adding background color to active item and cleaning up
This commit is contained in:
Rupin Khandelwal 2022-08-16 08:56:18 -05:00 committed by GitHub
commit e0e47f1623
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 49 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>
)

30
packages/web/styles/menu.css
View file

@ -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;
}