Double Menu Wrapper - Vue js
Iam using vue js template and there is a bug: after login its creating the "Menu wrapper" 2-times - so the Navbar is doubled. Any suggestions how to fix this?
Replies (3)
Hi Johannes,
Thank you for pointing us to this problem.
We will include a fix for it in the next Metronic release. For now, as a temporary solution, you can replace the update function with the code below in src/assets/ts/components/_SwapperComponent.ts.
public update = () => {
const parentSelector = this.getOption("parent")?.toString();
const mode = this.getOption("mode");
const parentElement = parentSelector
? document.querySelector(parentSelector)
: null;
if (parentElement && this.element.parentNode !== parentElement) {
const alreadyPended = document.getElementById("kt_header_menu") !== null;
if (!alreadyPended) {
const childEl = (parentElement as HTMLElement).querySelector("[data-kt-swapper="true"]");
childEl?.remove();
if (mode === "prepend") {
parentElement.prepend(this.element);
} else if (mode === "append") {
parentElement.append(this.element);
}
}
}
}Let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks a lot!
I just changed the double-quotes, then your provided code worked perfectly!
But i think this just a bug from this Website and you provided it correctly:
const childEl = (parentElement as HTMLElement).querySelector('[data-kt-swapper="true"]');
And with pre it creates the double quotes
const childEl = (parentElement as HTMLElement).querySelector("[data-kt-swapper="true"]");Hi Johannes,
Glad to hear it worked for you.
Oh yes, it is a problem with our code preview component, you should use a single quote for the selector string.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
