Rapproche le menu mobile de la maquette

ChessCubing.App/Components/SiteMenu.razor

@@ -12,15 +12,16 @@
 
 <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>
 
+            <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>
@@ -28,25 +29,11 @@
                     <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">
-                <div class="site-menu-account-top">
                     <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-account-panel">
                             <div class="site-menu-user">
                                 <strong>@DisplayName</strong>
                                 <span>@DisplayMeta</span>
@@ -56,13 +43,57 @@
                     }
                     else
                     {
-                    <div class="site-menu-account-actions" id="site-menu-account-panel">
+                        <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>
 </div>
 
@@ -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()
+    private string BuildMobileMenuToggleLabel()
-        => IsMobileAccountMenuOpen ? "Fermer le menu du compte" : "Ouvrir le menu du compte";
+        => IsMobileMenuOpen ? "Fermer le menu mobile" : "Ouvrir le menu mobile";
 
     private void RequestMenuSync()
         => _syncMenuAfterRender = true;

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;
 

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;
+    width: min(100%, 30rem);
-    gap: 0.8rem 1rem;
+    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-brand-icon {
-  .site-menu-account.is-open .site-menu-account-panel .button {
+    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-mobile-user {
-  .site-menu-account-panel {
-    justify-content: stretch;
-  }
-
-  .site-menu-user {
     text-align: left;
   }