How to style item in PanelMenu

UI Components for React
Post Reply
avykoukal
Posts: 7
Joined: 03 Oct 2017, 13:57

18 Jan 2022, 21:01

Hi,
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}
        />
)
Option 2 - this does not change color but stay expanded

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({...})
    
    
Is there an identifier that I use to record which menu item I clicked on?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

24 Jan 2022, 14:37

You should use CSS to style the item. Just F12 inpsect the DOM and you will see the CSS styles you can override etc.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

avykoukal
Posts: 7
Joined: 03 Oct 2017, 13:57

25 Jan 2022, 10:38

How do I find out which menu item was clicked. There is no identifier.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests