Rapproche le menu mobile de la maquette

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;