1

I'm using the React Metis Menu in one of project. One of the requirement was to have the menu formatted in such a manner where:

*Dashboard*
 - Item A 
    - Sub Item A
    - Sub Item B

 - Item B
    - Sub Item C


*Analytics* 
 - Item C 
    - Sub Item D
    - Sub Item E

From the structure, I figured that I could use 2 Metis Menu so that I can different headers (Dashboard/Analytics) before the individual clickable menu items.

The functionality works great but I am stuck with another situation where I now have 2 possible active items being highlighted at the same time.

I referred to the API at https://www.npmjs.com/package/react-metismenu#active-link-selectors, which suggested that we can use activeLinkLabel, activeLinkTo to override/control the active selectors. However, it seems to only work when first loaded, but subsequent clicks will make the changes obsolete.

...
const [ selected, setSelected ] = useState('');
const handleOnSelected = (event) => {
   const item = event.currentTarget;
   ...
   ...
   setSelected(item.name);

}
...


return (
<Fragment>
   <h5>Dashboard</h5>
   <MetisMenu activeLinkTo={selected} onSelected={handleOnSelected} content={DashboardItems} className="vertical-nav-menu" />

   <h5>Analytics</h5>
   <MetisMenu activeLinkTo={selected} onSelected={handleOnSelected} content={AnalyticsItems} className="vertical-nav-menu" />
</Fragment>);

Has anyone used this library before or could point out what I could be interpreting wrongly from the API?

toffee.beanns
  • 435
  • 9
  • 17

1 Answers1

-1
 <Fragment>
    <h5 className="app-sidebar__heading">Menu1</h5>
    <MetisMenu
      content={MainNav1}
      onSelected={toggleMobileSidebar}
      activeLinkFromLocation
      className="vertical-nav-menu"
      iconNamePrefix=""
      classNameStateIcon="pe-7s-angle-down"
    />

    <h5 className="app-sidebar__heading">Menu2</h5>
    <MetisMenu
      content={MainNav2}
      onSelected={toggleMobileSidebar}
      activeLinkFromLocation
      className="vertical-nav-menu"
      iconNamePrefix=""
      classNameStateIcon="pe-7s-angle-down"
    />
  </Fragment>
user14380108
  • 1