troogs/FoodsharingOnboarding
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add JS toggle logic to close menu on nav link click

Browse Source 
Introduced IJSRuntime to handle JavaScript calls and implemented `NavLinkClickedAsync` to automatically uncheck the menu toggle on navigation. Updated all NavLinks to trigger this logic, improving user experience by closing the menu after a link is clicked.
This commit is contained in:
Andre Beging
2025-03-27 17:48:03 +01:00
parent 6bc2757eb0
commit 4d646ad7f6
3 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
FoodsharingSiegen.Server/Shared/NavMenu.razor
View File

@@ -1,57 +1,71 @@
<nav class="flex-column">
<div class="nav-logo"></div>
<div class="d-flex px-3 justify-content-center text-center font-weight-bold">
Einarbeitungen<br />
Einarbeitungen<br/>
@(AppSettings.SidebarTitle ?? AppSettings.Title)
</div>
<div class="d-flex px-3 mt-3 justify-content-center text-center font-weight-bold">
Hallo @CurrentUser.Name!
</div>
<hr/>
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="fas fa-user-plus mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Einarbeiten
</NavLink>
<div @onclick="NavLinkClickedAsync">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="fas fa-user-plus mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Einarbeiten
</NavLink>
</div>
</div>
<div class="nav-item px-3">
<div @onclick="NavLinkClickedAsync">
<NavLink class="nav-link" href="todo" Match="NavLinkMatch.All">
<span class="fas fa-user-pen mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Freischalten
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="done" Match="NavLinkMatch.All">
<span class="fas fa-user-check mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Fertig
</NavLink>
</div>
<div class="nav-item px-3">
<div @onclick="NavLinkClickedAsync">
<NavLink class="nav-link" href="done" Match="NavLinkMatch.All">
<span class="fas fa-user-check mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Fertig
</NavLink>
</div>
</div>
<hr/>
@if (CurrentUser.IsAdmin())
{
<div class="nav-item px-3">
<NavLink class="nav-link" href="users" Match="NavLinkMatch.All">
<span class="fas fa-users mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Benutzer
</NavLink>
<div @onclick="NavLinkClickedAsync">
<NavLink class="nav-link" href="users" Match="NavLinkMatch.All">
<span class="fas fa-users mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Benutzer
</NavLink>
</div>
</div>
}
<div class="nav-item px-3">
<NavLink class="nav-link" href="profile" Match="NavLinkMatch.All">
<span class="fas fa-user mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Profil
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="audit" Match="NavLinkMatch.All">
<span class="fa-solid fa-clock-rotate-left mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Aktivitäten
</NavLink>
<div @onclick="NavLinkClickedAsync">
<NavLink class="nav-link" href="profile" Match="NavLinkMatch.All">
<span class="fas fa-user mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Profil
</NavLink>
</div>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="logout" Match="NavLinkMatch.All">
<span class="fa-solid fa-door-open mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Ausloggen
</NavLink>
<div @onclick="NavLinkClickedAsync">
<NavLink class="nav-link" href="audit" Match="NavLinkMatch.All">
<span class="fa-solid fa-clock-rotate-left mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Aktivitäten
</NavLink>
</div>
</div>
<div class="nav-item px-3">
<div @onclick="NavLinkClickedAsync">
<NavLink class="nav-link" href="logout" Match="NavLinkMatch.All">
<span class="fa-solid fa-door-open mr-2" aria-hidden="true" style="font-size: 1.4em;"></span> Ausloggen
</NavLink>
</div>
</div>
</nav>