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
<PageTitle>FoodsharingSiegen.Server</PageTitle>
<AuthorizeView>
<Authorized>
<div class="page">
<input type="checkbox" id="menu-toggler"/>
<input type="checkbox" id="menu-toggler" />
<label id="menu-toggler-label" for="menu-toggler">
<span class="menu-toggler-line"></span>

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>

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

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