src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/AccountSetting.cs

@@ -0,0 +1,21 @@
+namespace GameIdeas.BlazorApp.Pages.Games;
+
+public enum AccountSetting
+{
+	Login,
+	Logout
+}
+
+public class AccountSettingParams
+{
+    public string Label { get; set; }
+    public AccountSetting AccountSetting { get; set; }
+    public bool ForConnected { get; set; }
+
+    public AccountSettingParams(string label, AccountSetting accountSetting, bool forConnected)
+    {
+        Label = label;
+        AccountSetting = accountSetting;
+        ForConnected = forConnected;
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor

@@ -1,7 +1,7 @@
 @typeparam TItem
 
 <div @ref=Content class="dropdown-container" tabindex="1000"
-        @onfocusout=HandlerDropdownAddFocusOut>
+        @onfocusout=HandleDropdownAddFocusOut>
     <div class="dropdown-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
         @foreach (var item in Items)
         {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs

@@ -25,7 +25,7 @@ public partial class DropdownContent<TItem>
 
     public void Close() => ContentVisile = false;
 
-    private void HandlerDropdownAddFocusOut()
+    private void HandleDropdownAddFocusOut()
     {
         ContentLastFocusOut = DateTime.Now;
         ContentVisile = false;

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css

@@ -24,7 +24,7 @@
     gap: 4px;
     background: var(--violet);
     box-shadow: var(--drop-shadow);
-    padding: 4px;
+    padding: 4px 6px;
 }
 
     .drowdown-element.navigation:hover {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs

@@ -2,5 +2,6 @@
 
 public enum DropdownTheme
 {
-    Navigation
+    Navigation,
+    Account
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor

@@ -0,0 +1,6 @@
+<div @ref=Content class="account-setting-container" tabindex="1000"
+     @onfocusout=HandleAccountSettingFocusOut>
+    <div class="account-setting-content @(ContentVisile ? string.Empty : "invisible"))">
+        
+    </div>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs

@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Headers;
+
+public partial class AccountSettings
+{
+    private bool ContentVisile = false;
+    private DateTime ContentLastFocusOut = DateTime.Now;
+    private ElementReference Content;
+
+    public async Task OpenAsync()
+    {
+        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
+        {
+            await Content.FocusAsync();
+            ContentVisile = true;
+        }
+    }
+
+    public void Close() => ContentVisile = false;
+
+    private void HandleAccountSettingFocusOut()
+    {
+        ContentLastFocusOut = DateTime.Now;
+        ContentVisile = false;
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css

@@ -0,0 +1,13 @@
+.account-setting-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--big-radius);
+    position: fixed;
+    animation-name: fade-in;
+    animation-duration: 0.4s
+}
+
+.invisible {
+    display: none;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor

@@ -24,16 +24,18 @@
                 </div>
             </div>
             <DropdownContent @ref="DropdownAdd"
-                TItem="AddTypeParams"
-                ValueChanged=HandleAddTypeClickedAsync
-                Items="AddTypes"
-                LabelSelector="(addtype => addtype.Label)"
-                Theme="DropdownTheme.Navigation" />
+                             TItem="AddTypeParams"
+                             ValueChanged=HandleAddTypeClickedAsync
+                             Items="AddTypes"
+                             LabelSelector="(addtype => addtype.Label)"
+                             Theme="DropdownTheme.Navigation" />
         </div>
-        <div class="icon-container">
-            <svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
-            </svg>
+        <div class="account-container">
+            <div class="icon-container">
+                <svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+                </svg>
+            </div>
         </div>
     </div>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -12,6 +12,7 @@
     --semi-black: rgba(0, 0, 0, 0.5);
     --line-black: rgba(0, 0, 0, 0.2);
     --small-radius: 4px;
+    --big-radius: 10px;
     --radius: 6px;
     --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
 }

src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs

@@ -6,6 +6,8 @@ public class Translations (TranslationService translationService)
     public string GamesIdeas => translationService.Translate(nameof(GamesIdeas));
     public string ManualAdd => translationService.Translate(nameof(ManualAdd));
     public string AutoAdd => translationService.Translate(nameof(AutoAdd));
+    public string Login => translationService.Translate(nameof(Login));
+    public string Logout => translationService.Translate(nameof(Logout));
 }
 
 public static class ResourcesKey
@@ -20,4 +22,6 @@ public static class ResourcesKey
     public static string GamesIdeas => _instance?.GamesIdeas ?? throw new InvalidOperationException("ResourcesKey.GamesIdeas is not initialized.");
     public static string ManualAdd => _instance?.ManualAdd ?? throw new InvalidOperationException("ResourcesKey.ManualAdd is not initialized.");
     public static string AutoAdd => _instance?.AutoAdd ?? throw new InvalidOperationException("ResourcesKey.AutoAdd is not initialized.");
+    public static string Login => _instance?.Login ?? throw new InvalidOperationException("ResourcesKey.Login is not initialized.");
+    public static string Logout => _instance?.Logout ?? throw new InvalidOperationException("ResourcesKey.Logout is not initialized.");
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json

@@ -1,5 +1,7 @@
 {
   "GamesIdeas": "Game Ideas",
-  "ManualAdd": "Ajout manuel",
-  "AutoAdd": "Ajout automatique"
+  "ManualAdd": "Manuel",
+  "AutoAdd": "Automatique",
+  "Login": "Connexion",
+  "Logout": "Déconnexion"
 }