It actually a mod_menu in general, and admin-menu.js.
a mod_menu produces menus with duplicated ids:

and admin-menu.js cannot handle multiple menu, it was coded only for one #menu

Possible solution:
Drop use of ID, and use a "class" instead

Duplicated ID not allowed anyway.

@Fedik
I understand. Not sure I can solve myself.

best would be if it will fix who wrote it :)

Looks like metismenu wants only an id
https://onokumus.com/metismenujs/#install

As we are loading the same module twice, we have the same id which is not incremented.
echo '<ul id="menu" class="' . $class . '">' . "\n";

Looks like metismenu wants only an id

hm, not really, it want an element or string selector https://github.com/onokumus/metismenujs/blob/5648f65/src/index.ts#L23

in theory we can change the code from new window.MetisMenu('#menu');
to smething like:

var allMenus = document.querySelectorAll('ul.foo-bar-menu-class');
allMenus.forEach(function(menu){
  new MetisMenu(menu);
});

It will not depend from ID, but ID still must be incremented,
Maybe just id="menu<? echo $module->Id ?>"
But I not sure about styling, I suspect it may used in CSS, then also will be need changed CSS to use class instead of id.

a suggested fix seems works, but
unfortunately there more code that depend from "only single menu"

so it not that easy

Modified default.php to use
echo '<ul id="menu' . $module->id . '" class="' . $class . '">' . "\n";
then we indeed get a different id per module which anyway solved that aspect.

I then simplified the class code in admin-menu.js to see what happens

  var allMenus = document.querySelectorAll('ul.main-nav');

  allMenus.forEach(function(menu) {
  new MetisMenu(menu);
  });

tested and it works (after making sure a thousand times that we have no cache anywhere) and also got an error
ReferenceError: mainNav is not defined
because we have further down
var mainNav = document.getElementById('menu');
which obviously is wrong as module id is added to menu

Therefore it looks like we do have to get the id anyway.

var mainNav = document.getElementById('menu');

this thing also has to be changed to use class, and loop over all menu, or use only first menu.
I just not very understood, for what all that extra code in "Sidebar Nav"

I just not very understood, for what all that extra code in "Sidebar Nav"

Agree. It looks like working eventhough we have this js error.

@Fedik
I tried another way to get the id

    var forEach = function (array, callback, scope) {
      for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i]); // passes back stuff we need
      }
    };

    var allMenus = document.querySelectorAll('ul.main-nav');

    forEach(allMenus, function (index) {
      var x = document.getElementsByTagName('ul')[index];
      var mainNav = document.getElementById(x.id);
      console.log(x.id);
    });

But x.id gives both the menu# and the ul id of the children ul i.e. collapse#

maybe try do as you did before, and var mainNav = document.getElementById('menu'); replace to
var mainNav = document.querySelector('ul.main-nav');
this will pick a first found menu,
it a bit dirty but also should work, in theory

+1 Indeed, I do not get any more errors.
I will make a PR

Closed as having Pull Request #25995