From 4d646ad7f69198fc3b00c6e96f8d6ae124d4e76c Mon Sep 17 00:00:00 2001
From: Andre Beging <a.beging@eas-solutions.de>
Date: Thu, 27 Mar 2025 17:48:03 +0100
Subject: [PATCH] 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.
---
 .../Shared/DefaultLayout.razor                |  4 +-
 FoodsharingSiegen.Server/Shared/NavMenu.razor | 68 +++++++++++--------
 .../Shared/NavMenu.razor.cs                   |  9 +++
 3 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor
index 5c2f36e..551a3a0 100644
--- a/FoodsharingSiegen.Server/Shared/DefaultLayout.razor
+++ b/FoodsharingSiegen.Server/Shared/DefaultLayout.razor
@@ -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>
diff --git a/FoodsharingSiegen.Server/Shared/NavMenu.razor b/FoodsharingSiegen.Server/Shared/NavMenu.razor
index c2b0836..40c701a 100644
--- a/FoodsharingSiegen.Server/Shared/NavMenu.razor
+++ b/FoodsharingSiegen.Server/Shared/NavMenu.razor
@@ -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>
\ No newline at end of file
diff --git a/FoodsharingSiegen.Server/Shared/NavMenu.razor.cs b/FoodsharingSiegen.Server/Shared/NavMenu.razor.cs
index 8a3a906..293282a 100644
--- a/FoodsharingSiegen.Server/Shared/NavMenu.razor.cs
+++ b/FoodsharingSiegen.Server/Shared/NavMenu.razor.cs
@@ -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;");
+        }
     }
 }
\ No newline at end of file