In component demo1/src/_metronic/layout/components/sidebar/SidebarLogo.tsx.
ref={toggleRef}
type PropsType = {
sidebarRef: MutableRefObject<HTMLDivElement | null>
}
const SidebarLogo = (props: PropsType) => { ... }
const toggleRef = useRef<HTMLDivElement>(null);
useEffect(()=>{
setTimeout(()=>{
const toggleObj = ToggleComponent.getInstance(
toggleRef.current!
) as ToggleComponent | null;
if (toggleObj === null) {
return;
}
// Add a class to prevent sidebar hover effect after toggle click
toggleObj.on("kt.toggle.change", function () {
// Set animation state
props.sidebarRef.current!.classList.add("animating");
// Wait till animation finishes
setTimeout(function () {
// Remove animation state
props.sidebarRef.current!.classList.remove("animating");
}, 300);
});
}, 600)
}, [toggleRef, props.sidebarRef]);
ref={sidebarRef}
on sidebar element (element with id kt_app_sidebar).const sidebarRef = useRef<HTMLDivElement>(null);
<SidebarLogo sidebarRef={sidebarRef}/>