Add JS toggle logic to close menu on nav link click

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

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;");
}
}
}