const MenuItem: React.FC<Props> = ({isActive, setActiveItem, item}) => {
const handleClick = () => {
setActiveItem && setActiveItem(item.label);
};
const className = isActive ? 'visible' : 'hidden';
return (
<li>
{item.ref && (
<StyleClass
nodeRef={item.ref}
selector="@next"
enterClassName={className}
enterActiveClassName="slidedown"
leaveToClassName="hidden"
leaveActiveClassName="slideup"
>
<a
onClick={throttledOnClick}
style={{ textDecoration: 'none' }}
ref={item.ref}
<span className="font-medium">{item.label}</span>
<Ripple />
</a>
{item.children && item.children.length > 0 && (
<ul
className={`list-none py-0 pl-3 pr-0 m-0 ${className} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out`}
>
{item.children.map((child, index) => (
<MenuItem key={index} item={child} isActiveLink={router.pathname === child.link} />
))}
</ul>
)}
</StyleClass>
)}
</li>
);
};
Hello, when page loads i have isActive state which is set from localStorage but i want elemets to be visible first and then after click get StyleClass animations. When I try to bound classNames on isActive state it works but I can’t see transition anymore (slideup, slidedown). any possible fix?