After doing some research and trying out various solutions, I still couldn't get it to work. I made adjustments to my dropdown menu and click function so that each submenu opens and closes when its parent is clicked. However, I'm now looking to figure out how to close an open submenu when a different menu is clicked, as currently they all stack up on the menu bar. Any guidance on how I can achieve this would be greatly appreciated. Thank you for your help.
I am working with next js.
<div
className={ classNames(classes.root, {
[classes.rootActive]: active ,
[classes.rootExpanded]: isMenuShrunk,
})}
ref={anchor}
onClick={event => handleClick(event, menuItem) }
>
<button
className={classes.menuItemBtn}
data-test="menu-item-label"
data-test-id={menuItem.testingContextId}
>
{menuItem.iconSrc && <div className={classNames(classes.icon, {
[classes.icon]: isMenuShrunk
})} > <SVG src={menuItem.iconSrc}/></div>}
<Typography
aria-label={menuItem.ariaLabel}
className={classNames(classes.label, {
[classes.hideLabel]: !isMenuShrunk
})}
variant="body2"
>
{menuItem.label}
</Typography>
</button>
{menuItem.children && (
<Collapse
timeout="auto"
unmountOnExit
className={classNames({[classes.popper]: open && isMenuShrunk,})}
in={open}
>
<div>
{menuItem.children.map(subMenuItem => (
<Typography
aria-label={subMenuItem.ariaLabel}
component="button"
className={classNames({[classes.subColor]:!color , [classes.subMenuLabel]:open||!open,
[classes.sublabel]:open||!open})}
key={subMenuItem.url}
onClick={event => handleClickSubMenu(event, subMenuItem)}
data-test="submenu-item-label"
data-test-id={subMenuItem.testingContextId}
variant="body2"
>
{subMenuItem.label}
</Typography>
))}
</div>
</Collapse>
)}
</div>