Hi Kim,

Thank you so much for your detailed insights and fixes!

Your workaround for the menu.ts logic error and the adjustments with DOMContentLoaded and livewire:navigated are incredibly helpful. This kind of troubleshooting will benefit others facing similar issues.

We were working on this fix but hadn't found a better solution so far—glad you figured it out and shared it. We'll test your solution, and if it works well, we'll include it in the codebase. Hopefully, this information will also help other users.

Thanks again, and have a great day!

In addition to my previous answer i want to add that i've changed my dom.ts also which might be part of solving all of the problems.

I've played around with DOMContentLoaded, wire:navigating and wire:navigated.
The offical livewire documentation says it should be livewire:navigated. But if i only do that instead of DOMContentLoaded still only the initial page is working. If i do add like below another eventListener to the Document for livewire:navigated and execute that callback metronic works as wanted.

ready(callback: CallableFunction): void {
 if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", () => {
 callback();
 });
 document.addEventListener("livewire:navigated", () => {
 callback();
 });
 } else {
 callback();
 }
 }

Howdy to ya all!

While debugging the menu.ts i found a simple logic error everyone can fix.

In the menu.ts there is a the following code by default. As far as i understand it menu clicks are handled with it. There are several "return;" statements which cause the menu not to act as wanted e.g. if its disabled or the metronic toggle is not like scripts require.

If you change the first if from !== '#' to a === '#' and rebuild all assets it should work. It did for me. Let me know if i helped anyone with this ^^

Have a good day!
Kim from Germany

protected _click(element: HTMLElement, event: Event): void {
if (element.hasAttribute("href") && element.getAttribute("href") !== "#") {
return;
}

event.preventDefault();
event.stopPropagation();

if (this._disabled === true) {
return;
}

const itemElement = this._getItemElement(element);
if (!itemElement) return;

if (this._getItemOption(itemElement, "trigger") !== "click") {
return;
}

if (this._getItemOption(itemElement, "toggle") === false) {
this._show(itemElement);
} else {
this._toggle(itemElement);
}
}