could someone advise me how to style the selected item from PanelMenu.
Option 1 - when you click on an item, route display new section of page and the item turns colored (className="indicator"), but the entire menu is collapsed and this is undesirable.
Code: Select all
const [menu, setMenu] = useState([]);
useEffect(() => {
memberMenuItems();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.currentPage]);
const memberMenuItems = () => {
let menuItems = [];
menuItems.push({
label: 'Information',
expanded: ["profile", "settings", "topics"].includes(props.currentPage),
items: [{
label: 'Profile',
template: (item, options) => { return (
<div className={classNames('item-wrapper', {'active': (props.currentPage === 'profile')})} onClick={() => props.clickMenu('profile')}>
<div className="item">{item.label}</div>
</div>
)}
}]
});
menuItems.push({...})
};
setMenu(menuItems);
return (
<PanelMenu
model={menu}
/>
)
Code: Select all
useEffect(() => {
memberMenuItems();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const memberMenuItems = () => {
let menuItems = [];
menuItems.push({
label: 'Information',
expanded: ["profile", "settings", "topics"].includes(props.currentPage),
items: [{
label: 'Profile',
template: (item, options) => { return (
<div className="item-wrapper" onClick={() => props.clickMenu('profile')}>
<div className="item">{item.label}</div>
</div>
)}
}]
});
menuItems.push({...})