Rapproche le menu mobile de la maquette

2026-04-15 19:56:29 +02:00
parent 9fb7d2ce1b
commit 106786a638
3 changed files with 280 additions and 159 deletions
--- a/ChessCubing.App/Components/SiteMenu.razor
+++ b/ChessCubing.App/Components/SiteMenu.razor
@@ -12,55 +12,86 @@

 <div class="site-menu-shell">
    <header class="site-menu-bar">
-        <div class="site-menu-main">
+        <div class="site-menu-main @(IsMobileMenuOpen ? "is-mobile-open" : string.Empty)">
            <a class="site-menu-brand" href="index.html" aria-label="Accueil ChessCubing">
                <img class="site-menu-brand-icon" src="logo.png" alt="Icone ChessCubing" />
                <span class="site-menu-brand-copy">
                    <span class="micro-label">ChessCubing Arena</span>
-                    <strong>Menu general</strong>
+                    <strong>ChessCubing</strong>
                </span>
            </a>

-            <nav class="site-menu-links" aria-label="Navigation principale">
-                <a class="@BuildNavLinkClass(HomePaths)" href="index.html" aria-current="@BuildAriaCurrent(HomePaths)">Accueil</a>
-                <a class="@BuildNavLinkClass(ApplicationPaths)" href="application.html" aria-current="@BuildAriaCurrent(ApplicationPaths)">Application</a>
-                <a class="@BuildNavLinkClass(RulesPaths)" href="reglement.html" aria-current="@BuildAriaCurrent(RulesPaths)">Reglement</a>
-                <a class="@BuildNavLinkClass(UserPaths)" href="utilisateur.html" aria-current="@BuildAriaCurrent(UserPaths)">Utilisateur</a>
-            </nav>
+            <div class="site-menu-desktop">
+                <nav class="site-menu-links" aria-label="Navigation principale">
+                    <a class="@BuildNavLinkClass(HomePaths)" href="index.html" aria-current="@BuildAriaCurrent(HomePaths)">Accueil</a>
+                    <a class="@BuildNavLinkClass(ApplicationPaths)" href="application.html" aria-current="@BuildAriaCurrent(ApplicationPaths)">Application</a>
+                    <a class="@BuildNavLinkClass(RulesPaths)" href="reglement.html" aria-current="@BuildAriaCurrent(RulesPaths)">Reglement</a>
+                    <a class="@BuildNavLinkClass(UserPaths)" href="utilisateur.html" aria-current="@BuildAriaCurrent(UserPaths)">Utilisateur</a>
+                </nav>

-            <div class="site-menu-account @(IsMobileAccountMenuOpen ? "is-open" : string.Empty)">
-                <div class="site-menu-account-top">
+                <div class="site-menu-account">
                    <span class="micro-label">Compte joueur</span>
-                    <button class="site-menu-account-toggle"
-                            type="button"
-                            aria-label="@BuildAccountMenuToggleLabel()"
-                            aria-controls="site-menu-account-panel"
-                            aria-expanded="@BoolString(IsMobileAccountMenuOpen)"
-                            @onclick="ToggleMobileAccountMenu">
-                        <span class="site-menu-account-toggle-icon" aria-hidden="true">
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </span>
-                    </button>
-                </div>
-                @if (IsAuthenticated)
-                {
-                    <div class="site-menu-account-panel" id="site-menu-account-panel">
-                        <div class="site-menu-user">
-                            <strong>@DisplayName</strong>
-                            <span>@DisplayMeta</span>
+                    @if (IsAuthenticated)
+                    {
+                        <div class="site-menu-account-panel">
+                            <div class="site-menu-user">
+                                <strong>@DisplayName</strong>
+                                <span>@DisplayMeta</span>
+                            </div>
+                            <button class="button ghost small" type="button" @onclick="LogoutAsync" disabled="@IsSubmitting">Se deconnecter</button>
                        </div>
-                        <button class="button ghost small" type="button" @onclick="LogoutAsync" disabled="@IsSubmitting">Se deconnecter</button>
-                    </div>
-                }
-                else
-                {
-                    <div class="site-menu-account-actions" id="site-menu-account-panel">
-                        <button class="button secondary small" type="button" @onclick="OpenLoginModal">Se connecter</button>
-                        <button class="button ghost small" type="button" @onclick="OpenRegisterModal">Creer un compte</button>
-                    </div>
-                }
+                    }
+                    else
+                    {
+                        <div class="site-menu-account-actions">
+                            <button class="button secondary small" type="button" @onclick="OpenLoginModal">Se connecter</button>
+                            <button class="button ghost small" type="button" @onclick="OpenRegisterModal">Creer un compte</button>
+                        </div>
+                    }
+                </div>
+            </div>
+
+            <button class="site-menu-mobile-toggle"
+                    type="button"
+                    aria-label="@BuildMobileMenuToggleLabel()"
+                    aria-controls="site-mobile-menu-panel"
+                    aria-expanded="@BoolString(IsMobileMenuOpen)"
+                    @onclick="ToggleMobileMenu">
+                <span class="site-menu-mobile-toggle-icon" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </span>
+            </button>
+
+            <div class="site-menu-mobile-panel" id="site-mobile-menu-panel">
+                <nav class="site-menu-mobile-links" aria-label="Navigation principale">
+                    <a class="@BuildNavLinkClass(HomePaths)" href="index.html" aria-current="@BuildAriaCurrent(HomePaths)">Accueil</a>
+                    <a class="@BuildNavLinkClass(ApplicationPaths)" href="application.html" aria-current="@BuildAriaCurrent(ApplicationPaths)">Application</a>
+                    <a class="@BuildNavLinkClass(RulesPaths)" href="reglement.html" aria-current="@BuildAriaCurrent(RulesPaths)">Reglement</a>
+                    <a class="@BuildNavLinkClass(UserPaths)" href="utilisateur.html" aria-current="@BuildAriaCurrent(UserPaths)">Utilisateur</a>
+                </nav>
+
+                <div class="site-menu-mobile-account">
+                    <span class="micro-label">Compte joueur</span>
+                    @if (IsAuthenticated)
+                    {
+                        <div class="site-menu-mobile-account-panel">
+                            <div class="site-menu-mobile-user">
+                                <strong>@DisplayName</strong>
+                                <span>@DisplayMeta</span>
+                            </div>
+                            <button class="button ghost small" type="button" @onclick="LogoutAsync" disabled="@IsSubmitting">Se deconnecter</button>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="site-menu-mobile-account-actions">
+                            <button class="button secondary small" type="button" @onclick="OpenLoginModal">Se connecter</button>
+                            <button class="button ghost small" type="button" @onclick="OpenRegisterModal">Creer un compte</button>
+                        </div>
+                    }
+                </div>
            </div>
        </div>
    </header>
@@ -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<AuthenticationState> 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;
--- 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;

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