[React] Fix to prevent hover when clicking on sidebar toggle button
In component demo1/src/_metronic/layout/components/sidebar/SidebarLogo.tsx.
- On sidebar toggle element (element with id kt_app_sidebar_toggle) add attribute
ref={toggleRef}
- Add a new property for the component, to pass sidebar element.
type PropsType = {
sidebarRef: MutableRefObject<HTMLDivElement | null>
}const SidebarLogo = (props: PropsType) => { ... }
- Add a new ref variable and useEffect function as shown below.
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.
- Add attribute
ref={sidebarRef}
on sidebar element (element with id kt_app_sidebar). - Then add a new ref variable.
const sidebarRef = useRef<HTMLDivElement>(null);
- Pass sidebar ref to SidebarLogo component.
<SidebarLogo sidebarRef={sidebarRef}/>
Replies (0)
There is no reply for this question at the moment. Be first to leave a reply.