[HELP] How to prevent menu closing from firing on sidebar links

Is your feature request related to a problem? Please describe.

When I click on a sidebar item that is a link, the sidebar animation of closing the menu is fired, and the new page doesn’t load until after the animation, recreating an unnecessary delay.

Describe the solution you’d like

This is likely a configuration / HTML problem in my code, hoping someone can tell me what I’m doing wrong.

Additional context

For example, https://anki-subtitles.herokuapp.com/ – click on credits, and it opens a submenu. Clicking on either items closes the menu before opening the new page.

<li class="nav-item menu-open nav-item">
   <!-- collapsible ancestor-->
   <a class=" nav-link  active">
      <span class="nav-icon fas fa-circle"></span>
      <p>
         <!-- spanElement -->
         <span>Credits </span>
         <span class="end fas fa-angle-left"></span>
      </p>
   </a>
   <ul class="nav-treeview menu_level_1">
      <!-- has leaf_class -->                        
      <li class="f nav-link leaf">                            
         <a href="/credits/bundles">
         Bundles 
         </a>
      </li>
      <!-- has leaf_class -->                        
      <li class="active last nav-link leaf">                                        
         <a href="/credits/javascript" class=" active">
         Javascript 
         </a>
      </li>
   </ul>
</li>

The javascript I’m using is a copy of what’s generated from the gulp build command, and is included in my webpack config. It seems to work, except for this issue.

https://github.com/survos/BaseBundle/blob/master/src/Resources/assets/js/adminlte.js

Alas, my javascript skills are limited. I think the issue is that the close menu event is being fired on the entire tree, when really I just want it to fire on the -treeview items (the branches, not the leaves).

domReady(() => {
        const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE$1);
        for (const btn of button) {
            btn.addEventListener('click', event => {
                // event.preventDefault()
                const treeviewMenu = event.target;
                const data = new Treeview(treeviewMenu, Default$1);
                data.toggle();
            });
        }
    });

Any suggestions?

[tacman]

THANKS!!! I’m embarrassed about how many hours I looked for that, and couldn’t see what was wrong.

Works as expected now.

[REJack]

your sidebar html markup isn’t correct, you set .nav-link to the li-tag but that need on the a-tag and you need to set .nav-item to the li-tag.

like this:

<li class="nav-item">
  <a href="./index.html" class="nav-link ">
    <i class="nav-icon far fa-circle"></i>
    <p>Dashboard v1</p>
  </a>
</li>