diff --git a/ChessCubing.App/Components/SiteMenu.razor b/ChessCubing.App/Components/SiteMenu.razor index ba6f11e..9428643 100644 --- a/ChessCubing.App/Components/SiteMenu.razor +++ b/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 authenticationStateTask) => _ = InvokeAsync(RefreshAuthenticationStateAsync); + private void RequestMenuSync() + => _syncMenuAfterRender = true; + private async Task RefreshAuthenticationStateAsync() { try diff --git a/ChessCubing.App/Services/BrowserBridge.cs b/ChessCubing.App/Services/BrowserBridge.cs index 19e6f97..7f4ce73 100644 --- a/ChessCubing.App/Services/BrowserBridge.cs +++ b/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 ReadMatchJsonAsync(string storageKey, string windowNameKey) => jsRuntime.InvokeAsync("chesscubingStorage.getMatchState", storageKey, windowNameKey); diff --git a/ChessCubing.App/wwwroot/js/chesscubing-interop.js b/ChessCubing.App/wwwroot/js/chesscubing-interop.js index d3bf853..f24a3e7 100644 --- a/ChessCubing.App/wwwroot/js/chesscubing-interop.js +++ b/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; }