Masque le menu pendant l'authentification mobile

ChessCubing.App/Components/SiteMenu.razor

@@ -6,6 +6,7 @@
 @using Microsoft.AspNetCore.Components.Authorization
 @implements IDisposable
 @inject AppAuthenticationStateProvider AuthenticationStateProvider
+@inject BrowserBridge Browser
 @inject HttpClient Http
 @inject NavigationManager Navigation
 
@@ -168,6 +169,7 @@
     private AuthMode Mode = AuthMode.Login;
     private string DisplayName = "Utilisateur connecte";
     private string DisplayMeta = "Session active";
+    private bool _syncMenuAfterRender;
 
     private string CurrentPath
     {
@@ -184,6 +186,17 @@
         await RefreshAuthenticationStateAsync();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_syncMenuAfterRender)
+        {
+            return;
+        }
+
+        _syncMenuAfterRender = false;
+        await Browser.SyncMenuAsync();
+    }
+
     private string BuildNavLinkClass(string[] paths)
         => IsCurrentPage(paths) ? "site-menu-link is-active" : "site-menu-link";
 
@@ -197,12 +210,14 @@
     {
         ShowAuthModal = true;
         SwitchToLogin();
+        RequestMenuSync();
     }
 
     private void OpenRegisterModal()
     {
         ShowAuthModal = true;
         SwitchToRegister();
+        RequestMenuSync();
     }
 
     private void CloseAuthModal()
@@ -214,6 +229,7 @@
 
         ShowAuthModal = false;
         FormError = null;
+        RequestMenuSync();
     }
 
     private void SwitchToLogin()
@@ -300,6 +316,7 @@
             FormError = null;
             ResetForms();
             await RefreshAuthenticationStateAsync();
+            RequestMenuSync();
         }
         catch (HttpRequestException)
         {
@@ -344,6 +361,9 @@
     private void HandleAuthenticationStateChanged(Task<AuthenticationState> authenticationStateTask)
         => _ = InvokeAsync(RefreshAuthenticationStateAsync);
 
+    private void RequestMenuSync()
+        => _syncMenuAfterRender = true;
+
     private async Task RefreshAuthenticationStateAsync()
     {
         try

ChessCubing.App/Services/BrowserBridge.cs

@@ -10,6 +10,9 @@ public sealed class BrowserBridge(IJSRuntime jsRuntime)
     public ValueTask SetBodyStateAsync(string? page, string? bodyClass)
         => jsRuntime.InvokeVoidAsync("chesscubingPage.setBodyState", page, bodyClass ?? string.Empty);
 
+    public ValueTask SyncMenuAsync()
+        => jsRuntime.InvokeVoidAsync("chesscubingMenu.sync");
+
     public ValueTask<string?> ReadMatchJsonAsync(string storageKey, string windowNameKey)
         => jsRuntime.InvokeAsync<string?>("chesscubingStorage.getMatchState", storageKey, windowNameKey);
 

ChessCubing.App/wwwroot/js/chesscubing-interop.js

@@ -46,6 +46,14 @@
     document.body.classList.toggle("site-menu-hidden", hidden);
   }
 
+  function shouldHideMenuForModal(modal) {
+    if (!modal) {
+      return false;
+    }
+
+    return window.matchMedia("(max-width: 900px)").matches && modal.querySelector(".auth-modal-card") !== null;
+  }
+
   function syncMenuVisibility() {
     menuAnimationFrame = 0;
 
@@ -58,7 +66,7 @@
 
     const modalIsOpen = document.querySelector(".modal:not(.hidden)");
     if (modalIsOpen) {
-      setMenuHidden(false);
+      setMenuHidden(shouldHideMenuForModal(modalIsOpen));
       menuLastScrollY = window.scrollY || window.pageYOffset || 0;
       return;
     }