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

4
FoodsharingSiegen.Server/Shared/DefaultLayout.razor
View File

@@ -1,11 +1,9 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<PageTitle>FoodsharingSiegen.Server</PageTitle>
<AuthorizeView> <AuthorizeView>
<Authorized> <Authorized>
<div class="page"> <div class="page">
<input type="checkbox" id="menu-toggler"/> <input type="checkbox" id="menu-toggler" />
<label id="menu-toggler-label" for="menu-toggler"> <label id="menu-toggler-label" for="menu-toggler">
<span class="menu-toggler-line"></span> <span class="menu-toggler-line"></span>

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

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

9
FoodsharingSiegen.Server/Shared/NavMenu.razor.cs
View File

@@ -3,6 +3,7 @@ using FoodsharingSiegen.Contracts.Model;
using FoodsharingSiegen.Server.Auth; using FoodsharingSiegen.Server.Auth;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Options; using Microsoft.Extensions.Options;
using Microsoft.JSInterop;
namespace FoodsharingSiegen.Server.Shared namespace FoodsharingSiegen.Server.Shared
{ {
@@ -11,6 +12,9 @@ namespace FoodsharingSiegen.Server.Shared
/// </summary> /// </summary>
public partial class NavMenu public partial class NavMenu
{ {
[Inject]
private IJSRuntime JsRuntime { get; set; } = null!;
#region Dependencies #region Dependencies
[Inject] [Inject]
@@ -50,5 +54,10 @@ namespace FoodsharingSiegen.Server.Shared
} }
#endregion #endregion
private async Task NavLinkClickedAsync()
{
await JsRuntime.InvokeVoidAsync("eval", "document.getElementById('menu-toggler').checked=false;");
}
} }
} }