https://levaa.app/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js

1(function() {
2
3  // ignore if routing is enabled
4  if (dmx.routing) return;
5
6  dmx.config.mapping['a.nav-link:not([href^="#"])'] = 'nav-link';
7
8  dmx.Component('nav-link', {
9
10    init (node) {
11      this._stateHandler = this._stateHandler.bind(this);
12      window.addEventListener("popstate", this._stateHandler);
13      window.addEventListener("pushstate", this._stateHandler);
14      window.addEventListener("replacestate", this._stateHandler);
15      window.addEventListener('hashchange', this._stateHandler);
16      this._stateHandler();
17    },
18
19    destroy () {
20      window.removeEventListener("popstate", this._stateHandler);
21      window.removeEventListener("pushstate", this._stateHandler);
22      window.removeEventListener("replacestate", this._stateHandler);
23      window.removeEventListener('hashchange', this._stateHandler);
24    },
25
26    _stateHandler () {
27      const node = this.$node;
28      const active = node.href == window.location.href || node.href == window.location.href.split("?")[0].split("#")[0];
29
30      node.classList.toggle('active', active);
31
32      if (node.classList.contains('dropdown-item')) {
33        const items = node.parentNode.querySelectorAll('.dropdown-item');
34        node.classList.remove('active');
35
36        for (let i = 0; i < items.length; i++) {
37          const match = items[i].href == window.location.href || items[i].href == window.location.href.split("?")[0].split("#")[0];
38          if (match) {
39            items[i].classList.add('active');
40            node.classList.add('active');
41          } else {
42            items[i].classList.remove('active');
43          }
44        }
45      }
46    },
47
48  });
49
50})()