In component demo1/src/_metronic/layout/components/sidebar/SidebarLogo.tsx.

1. On sidebar toggle element (element with id kt_app_sidebar_toggle) add attribute ref={toggleRef}
2. Add a new property for the component, to pass sidebar element.
   
   
   copy

   type PropsType = {
   
    sidebarRef: MutableRefObject<HTMLDivElement | null>
   
   }
   
   
   
   const SidebarLogo = (props: PropsType) => { ... }

   
   
3. Add a new ref variable and useEffect function as shown below.
   
   
   
   copy

   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]);

   
   

1. Add attribute ref={sidebarRef} on sidebar element (element with id kt_app_sidebar).
2. Then add a new ref variable.
   
   
   
   copy

   const sidebarRef = useRef<HTMLDivElement>(null);

   
   
3. Pass sidebar ref to SidebarLogo component.
   
   
   copy

   <SidebarLogo sidebarRef={sidebarRef}/>