From 106786a63836b39d8abbd3137e23efe0f687ed52 Mon Sep 17 00:00:00 2001 From: Christophe Date: Wed, 15 Apr 2026 19:56:29 +0200 Subject: [PATCH] Rapproche le menu mobile de la maquette --- ChessCubing.App/Components/SiteMenu.razor | 132 +++++--- .../wwwroot/js/chesscubing-interop.js | 10 + styles.css | 297 +++++++++++------- 3 files changed, 280 insertions(+), 159 deletions(-) diff --git a/ChessCubing.App/Components/SiteMenu.razor b/ChessCubing.App/Components/SiteMenu.razor index b875889..8fe0ab2 100644 --- a/ChessCubing.App/Components/SiteMenu.razor +++ b/ChessCubing.App/Components/SiteMenu.razor @@ -12,55 +12,86 @@
-
+
Icone ChessCubing ChessCubing Arena - Menu general + ChessCubing - +
+ -
@@ -178,7 +209,7 @@ private bool IsAuthenticated; private bool ShowAuthModal; private bool IsSubmitting; - private bool IsMobileAccountMenuOpen; + private bool IsMobileMenuOpen; private string? FormError; private string AuthModalTitle = "Se connecter"; private AuthMode Mode = AuthMode.Login; @@ -223,7 +254,7 @@ private void OpenLoginModal() { - CloseMobileAccountMenu(); + CloseMobileMenu(); ShowAuthModal = true; SwitchToLogin(); RequestMenuSync(); @@ -231,7 +262,7 @@ private void OpenRegisterModal() { - CloseMobileAccountMenu(); + CloseMobileMenu(); ShowAuthModal = true; SwitchToRegister(); RequestMenuSync(); @@ -332,6 +363,7 @@ ShowAuthModal = false; FormError = null; ResetForms(); + CloseMobileMenu(); await RefreshAuthenticationStateAsync(); RequestMenuSync(); } @@ -362,7 +394,7 @@ IsSubmitting = true; FormError = null; - CloseMobileAccountMenu(); + CloseMobileMenu(); try { @@ -379,25 +411,25 @@ private void HandleAuthenticationStateChanged(Task authenticationStateTask) => _ = InvokeAsync(RefreshAuthenticationStateAsync); - private void ToggleMobileAccountMenu() + private void ToggleMobileMenu() { - IsMobileAccountMenuOpen = !IsMobileAccountMenuOpen; + IsMobileMenuOpen = !IsMobileMenuOpen; RequestMenuSync(); } - private void CloseMobileAccountMenu() + private void CloseMobileMenu() { - if (!IsMobileAccountMenuOpen) + if (!IsMobileMenuOpen) { return; } - IsMobileAccountMenuOpen = false; + IsMobileMenuOpen = false; RequestMenuSync(); } - private string BuildAccountMenuToggleLabel() - => IsMobileAccountMenuOpen ? "Fermer le menu du compte" : "Ouvrir le menu du compte"; + private string BuildMobileMenuToggleLabel() + => IsMobileMenuOpen ? "Fermer le menu mobile" : "Ouvrir le menu mobile"; private void RequestMenuSync() => _syncMenuAfterRender = true; diff --git a/ChessCubing.App/wwwroot/js/chesscubing-interop.js b/ChessCubing.App/wwwroot/js/chesscubing-interop.js index f24a3e7..4ccb231 100644 --- a/ChessCubing.App/wwwroot/js/chesscubing-interop.js +++ b/ChessCubing.App/wwwroot/js/chesscubing-interop.js @@ -71,6 +71,16 @@ return; } + const mobileMenuIsOpen = + window.matchMedia("(max-width: 900px)").matches && + document.querySelector(".site-menu-main.is-mobile-open") !== null; + + if (mobileMenuIsOpen) { + setMenuHidden(false); + menuLastScrollY = window.scrollY || window.pageYOffset || 0; + return; + } + const currentScrollY = Math.max(window.scrollY || window.pageYOffset || 0, 0); const delta = currentScrollY - menuLastScrollY; diff --git a/styles.css b/styles.css index ce142ee..f8f2908 100644 --- a/styles.css +++ b/styles.css @@ -1057,8 +1057,9 @@ body.site-menu-hidden .site-menu-shell { } .site-menu-main { + position: relative; display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; + grid-template-columns: auto minmax(0, 1fr); width: min(1220px, calc(100% - 2rem)); margin: 0 auto; align-items: center; @@ -1071,6 +1072,7 @@ body.site-menu-hidden .site-menu-shell { align-items: center; gap: 0.85rem; color: var(--text); + min-width: 0; } .site-menu-brand:hover, @@ -1088,6 +1090,7 @@ body.site-menu-hidden .site-menu-shell { .site-menu-brand-copy { display: grid; gap: 0.2rem; + min-width: 0; } .site-menu-brand-copy .micro-label { @@ -1095,8 +1098,23 @@ body.site-menu-hidden .site-menu-shell { } .site-menu-brand-copy strong { - font-size: 1rem; + font-size: 1.08rem; line-height: 1; + letter-spacing: -0.03em; + white-space: nowrap; +} + +.site-menu-desktop { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 1rem; + min-width: 0; +} + +.site-menu-mobile-toggle, +.site-menu-mobile-panel { + display: none; } .site-menu-links { @@ -1142,61 +1160,10 @@ body.site-menu-hidden .site-menu-shell { justify-items: end; } -.site-menu-account-top { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 0.75rem; - width: 100%; -} - .site-menu-account .micro-label { margin-bottom: 0; } -.site-menu-account-toggle { - display: none; - align-items: center; - justify-content: center; - width: 3rem; - height: 3rem; - padding: 0; - border: 1px solid var(--panel-border); - border-radius: 18px; - background: rgba(19, 22, 29, 0.92); - color: var(--text); - cursor: pointer; - transition: - transform 160ms ease, - background 160ms ease, - border-color 160ms ease; -} - -.site-menu-account-toggle:hover { - transform: translateY(-1px); - border-color: var(--panel-border-strong); - background: rgba(24, 29, 39, 0.96); -} - -.site-menu-account-toggle-icon { - display: grid; - gap: 0.3rem; - width: 1.35rem; -} - -.site-menu-account-toggle-icon span { - display: block; - width: 100%; - height: 2px; - border-radius: 999px; - background: currentColor; -} - -.site-menu-account.is-open .site-menu-account-toggle { - border-color: rgba(52, 141, 255, 0.32); - background: rgba(17, 103, 255, 0.18); -} - .site-menu-account-actions, .site-menu-account-panel { display: flex; @@ -1221,6 +1188,22 @@ body.site-menu-hidden .site-menu-shell { font-size: 0.9rem; } +.site-menu-mobile-links, +.site-menu-mobile-account-actions, +.site-menu-mobile-account-panel, +.site-menu-mobile-user { + display: grid; +} + +.site-menu-mobile-user { + gap: 0.15rem; +} + +.site-menu-mobile-user span { + color: var(--muted); + font-size: 0.9rem; +} + .auth-modal-card { width: min(980px, 100%); padding: 1.1rem; @@ -1635,7 +1618,17 @@ body.site-menu-hidden .site-menu-shell { @media (max-width: 900px) { :root { - --site-menu-offset: calc(10.8rem + var(--safe-top)); + --site-menu-offset: calc(6.8rem + var(--safe-top)); + } + + .site-menu-shell { + padding: calc(var(--safe-top) + 0.45rem) 0.75rem 0; + } + + .site-menu-bar { + border-bottom: 0; + background: transparent; + backdrop-filter: none; } .phase-body { @@ -1660,71 +1653,157 @@ body.site-menu-hidden .site-menu-shell { .site-menu-main { grid-template-columns: minmax(0, 1fr) auto; - align-items: start; - gap: 0.8rem 1rem; + width: min(100%, 30rem); + align-items: center; + gap: 0.85rem; + padding: 0.75rem 0.95rem; + border: 1px solid rgba(255, 255, 255, 0.13); + border-radius: 28px; + background: + linear-gradient(135deg, rgba(255, 157, 30, 0.16), rgba(52, 141, 255, 0.12)), + rgba(14, 16, 21, 0.92); + box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34); + backdrop-filter: blur(18px); } .site-menu-brand { justify-content: flex-start; - } - - .site-menu-links { - grid-column: 1 / -1; - justify-content: center; - } - - .site-menu-account { - position: relative; - justify-items: end; - justify-self: end; - align-self: start; - } - - .site-menu-account .micro-label { - display: none; - } - - .site-menu-account-top { - justify-content: flex-end; - } - - .site-menu-account-toggle { - display: inline-flex; - } - - .site-menu-account-actions, - .site-menu-account-panel { - display: none; - position: absolute; - top: calc(100% + 0.65rem); - right: 0; - z-index: 3; - min-width: min(17rem, calc(100vw - 1rem)); - padding: 0.9rem; - border: 1px solid var(--panel-border); - border-radius: 22px; - background: rgba(14, 16, 21, 0.96); - box-shadow: var(--shadow); - } - - .site-menu-account.is-open .site-menu-account-actions, - .site-menu-account.is-open .site-menu-account-panel { - display: grid; - justify-content: stretch; gap: 0.75rem; } - .site-menu-account.is-open .site-menu-account-actions .button, - .site-menu-account.is-open .site-menu-account-panel .button { + .site-menu-brand-icon { + width: 60px; + height: 60px; + } + + .site-menu-brand-copy .micro-label { + display: none; + } + + .site-menu-brand-copy strong { + font-size: clamp(1.55rem, 6vw, 2rem); + background: linear-gradient(90deg, #ff8a2b 0%, #f0a14f 38%, #4f96ff 73%, #2d78ef 100%); + background-clip: text; + -webkit-background-clip: text; + color: transparent; + } + + .site-menu-desktop { + display: none; + } + + .site-menu-mobile-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3.4rem; + height: 3.4rem; + padding: 0; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 22px; + background: rgba(255, 255, 255, 0.04); + color: var(--text); + cursor: pointer; + transition: + transform 160ms ease, + background 160ms ease, + border-color 160ms ease; + } + + .site-menu-mobile-toggle:hover { + transform: translateY(-1px); + border-color: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.08); + } + + .site-menu-mobile-toggle-icon { + display: grid; + gap: 0.34rem; + width: 1.6rem; + } + + .site-menu-mobile-toggle-icon span { + display: block; + width: 100%; + height: 3px; + border-radius: 999px; + background: currentColor; + transform-origin: center; + transition: + transform 180ms ease, + opacity 180ms ease; + } + + .site-menu-main.is-mobile-open .site-menu-mobile-toggle { + border-color: rgba(255, 255, 255, 0.22); + background: rgba(255, 255, 255, 0.1); + } + + .site-menu-main.is-mobile-open .site-menu-mobile-toggle-icon span:nth-child(1) { + transform: translateY(0.46rem) rotate(45deg); + } + + .site-menu-main.is-mobile-open .site-menu-mobile-toggle-icon span:nth-child(2) { + opacity: 0; + } + + .site-menu-main.is-mobile-open .site-menu-mobile-toggle-icon span:nth-child(3) { + transform: translateY(-0.46rem) rotate(-45deg); + } + + .site-menu-mobile-panel { + position: absolute; + top: calc(100% + 0.6rem); + left: 0; + right: 0; + z-index: 3; + padding: 1rem; + border: 1px solid rgba(255, 255, 255, 0.13); + border-radius: 26px; + background: + linear-gradient(135deg, rgba(255, 157, 30, 0.12), rgba(52, 141, 255, 0.1)), + rgba(14, 16, 21, 0.96); + box-shadow: var(--shadow); + } + + .site-menu-main.is-mobile-open .site-menu-mobile-panel { + display: grid; + gap: 1rem; + } + + .site-menu-mobile-links { + gap: 0.55rem; + } + + .site-menu-mobile-links .site-menu-link { + width: 100%; + justify-content: flex-start; + padding: 0.95rem 1rem; + border-radius: 18px; + background: rgba(255, 255, 255, 0.04); + } + + .site-menu-mobile-account { + display: grid; + gap: 0.8rem; + padding-top: 0.2rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); + } + + .site-menu-mobile-account .micro-label { + margin-bottom: 0; + } + + .site-menu-mobile-account-actions, + .site-menu-mobile-account-panel { + gap: 0.75rem; + } + + .site-menu-mobile-account .button { width: 100%; } - .site-menu-account-actions, - .site-menu-account-panel { - justify-content: stretch; - } - - .site-menu-user { + .site-menu-mobile-user { text-align: left; }