Using Blazor server, with Bootstrap. Currently, if I navigate from the home page and try to open the off canvas nav, I must click twice. The first click seems to make it active, the second actually opens it. I'd like it to just... open the first time.
<div class="container-fluid"><div class="nav-section"><button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav" aria-controls="offcanvasNav"><i class="bi bi-list"></i></button><a class="navbar-brand" href="/"><img class="logo" src="/LOGO.png" alt="logo stacked" /></a><div class="breadcrumbs"><Breadcrumbs/></div></div><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasNavLabel">Application</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div></div>I tried adding @rendermode Interactive Server, which fixes the issue, but introduces two issues.
- The menu doesn't close upon new page load.
- It messes up my 'active link' which is done like so:
<li class="admin-dropdown"><a class="admin-item dropdown-item @(IsActiveRoute("/Admin/Courses"))" href="/Admin/Courses"> Edit Courses<i class="bi bi-chevron-right"></i></a></li>@code { private string GetRelativePath() { var uri = new Uri(NavManager.Uri); var relativePath = uri.AbsolutePath; return relativePath; } private bool IsActiveRoute(string route) { return GetRelativePath() == route; }}```