[Vue] Fix to prevent hover when clicking on sidebar toggle button
In component demo1/src/layouts/main-layout/sidebar/SidebarLogo.vue.
- 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.
props: {
sidebarRef: {
type: Object as PropType<HTMLElement | null>,
required: true,
},
},
- Inside setup function add a new ref variable and onMouted function as shown below.
const toggleRef = ref<HTMLFormElement | null>(null);
onMounted(() => {
setTimeout(() => {
const toggleObj = ToggleComponent.getInstance(
toggleRef.value!
) 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?.classList.add("animating");
// Wait till animation finishes
setTimeout(function () {
// Remove animation state
props.sidebarRef?.classList.remove("animating");
}, 300);
});
}, 1);
});
return {
toggleRef,
...
};
In component demo1/src/layouts/main-layout/sidebar/Sidebar.vue.
- Add attribute
ref="sidebarRef"on sidebar element (element with id kt_app_sidebar). - Inside setup function add a new ref variable and return this variable.
const sidebarRef = ref<HTMLFormElement | null>(null);
return {
sidebarRef
...
}
- Pass sidebar ref to SidebarLogo component.
<KTSidebarLogo :sidebar-ref="sidebarRef"></KTSidebarLogo>
Replies (0)
There is no reply for this question at the moment. Be first to leave a reply.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
