Blazor mobile user-menu doesn't work

[EvandroMotaSouza]

Create a new project with ABP Framework
Blazor Webassembly - LeptonX Lite
Like: abp new Acme.BookStore -u blazor

Reduce the size of the browser until the mobile menu appears.
Try to open the menu: nothing happens.

[ismcagdas]

@enisn could you check this ?

[EvandroMotaSouza]

Thank you for your attention.
If it helps, I think it might be something related or to this part:

On global.js

521: (t, e, n) => {
                var o;
                o = function(t, e) {
                    "use strict";
                    Object.defineProperty(e, "__esModule", {
                        value: !0
                    }), e.lpxToggle = e.LpxToggle = void 0;
                    var n = function() {
                        document.addEventListener("DOMContentLoaded", (function() {
                            document.querySelectorAll(".lpx-toggle").forEach((function(t) {
                                t.addEventListener("click", (function() {
                                    Array.from(t.parentElement.children).filter((function(e) {
                                        return e !== t
                                    })).forEach((function(t) {
                                        var e = document.querySelector("#".concat(t.dataset.lpxToggle));
                                        e && e.classList.add("d-none")
                                    }));
                                    var e = document.querySelector("#".concat(t.dataset.lpxToggle));
                                    e && e.classList.toggle("d-none")
                                }))
                            }))
                        }))
                    };
                    e.LpxToggle = n, e.lpxToggle = new n
                }.apply(e, [n, e]), void 0 === o || (t.exports = o)
            },

And this on HTML

<div class="lpx-mobile-navbar-container">
   <header class="lpx-mobile-navbar">
      <div class="lpx-logo-container">
         <!--!--><!--!-->
         <a href="/">
            <div class="lpx-brand-logo"></div>
         </a>
      </div>
      <!--!-->
      <!--!-->
      <div class="user-menu"><i class="lpx-icon bi bi-person lpx-toggle" data-lpx-toggle="mobile-user-menu-group" aria-hidden="true"></i>
         <i class="lpx-icon bi bi-list lpx-toggle" data-lpx-toggle="mobile-navbar" aria-hidden="true"></i>
      </div>
   </header>
   <!--!-->
   <div class="user-menu-groups d-none" id="mobile-user-menu-group">
      <!--!--><!--!--><!--!--><!--!--><a class="nav-link" href="/authentication/login">Entrar</a>
   </div>
   <!--!-->
   <nav class="lpx-mobile-nav-items d-none" id="mobile-navbar">
      <ul class="lpx-nav-menu" id="mobile-sidebar">
         <!--!-->
         <li class="outer-menu-item">
            <!--!-->
            <a class="lpx-menu-item-link lpx-menu-item selected " id="MenuItem_Autenticacao.Home">
               <span class="lpx-menu-item-icon"><i class="lpx-icon fas fa-home" aria-hidden="true"></i></span><!--!-->
               <span class="lpx-menu-item-text hidden-in-hover-trigger">Principal</span>
            </a>
         </li>
      </ul>
   </nav>
</div>

Apparently the function is not removing the d-none in the html

Or something related to the compatibility of blazor with javascript/jquery

[enisn]

It happens because of timing. DOM is ready but Blazor hasn't initialized the entire layout. The initialization script is executed when index.html is loaded properly. But Blazor layout will be rendered after blazor is initialized on dotnet wasm runtime.

Initialization should be triggered from Blazor by using Javascript Interop after the layout be ready.

[enisn]

We've solved the isssue, it'll be released in the next v2.0 patch version