[React] Fix to prevent hover when clicking on sidebar toggle button

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

   
   

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

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}/>