In component demo1/src/layouts/main-layout/sidebar/SidebarLogo.vue.

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

   props: {
    sidebarRef: {
    type: Object as PropType<HTMLElement | null>,
    required: true,
    },
    },

   
   


3. Inside setup function add a new ref variable and onMouted function as shown below.
   
   
   
   copy

   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,
    ...
    };

   
   

1. Add attribute ref="sidebarRef" on sidebar element (element with id kt_app_sidebar).


2. Inside setup function add a new ref variable and return this variable.
   
   
   
   copy

   const sidebarRef = ref<HTMLFormElement | null>(null);
   
   return {
    sidebarRef
    ...
   }

   
   


3. Pass sidebar ref to SidebarLogo component.
   
   
   copy

   <KTSidebarLogo :sidebar-ref="sidebarRef"></KTSidebarLogo>