Rework user menu

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor

@@ -1,5 +1,5 @@
 @using GameIdeas.BlazorApp.Pages.Games
-@using GameIdeas.BlazorApp.Shared.Components.Account
+@using GameIdeas.BlazorApp.Pages.User
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Models
@@ -32,13 +32,6 @@
                 </Select>
             </div>
         </div>
-        <div class="account-container">
+        <UserMenu />
-            <div class="icon-container" @onclick=HandleAccountClicked>
-                <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>
-            <AccountSettings @ref="AccountSettings" />
-        </div>
     </div>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs

@@ -1,4 +1,3 @@
-using GameIdeas.BlazorApp.Shared.Components.Account;
 using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Models;
@@ -18,7 +17,6 @@ public partial class GameHeader : ComponentBase
         { AddType.Auto, ResourcesKey.AutoAdd }
     };
 
-    private AccountSettings? AccountSettings;
     private Select<KeyValuePair<AddType, string>, object>? SelectListAdd;
     private SelectParams<KeyValuePair<AddType, string>, object> SelectParams = new();
 
@@ -26,7 +24,7 @@ public partial class GameHeader : ComponentBase
     {
         SelectParams = new()
         {
-            Items = AddTypes.ToList(),
+            Items = [.. AddTypes],
             GetItemLabel = item => item.Value
         };
 
@@ -43,9 +41,4 @@ public partial class GameHeader : ComponentBase
         SelectListAdd?.Close();
         await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key);
     }
-
-    private void HandleAccountClicked()
-    {
-        AccountSettings?.Toggle();
-    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.css

@@ -14,6 +14,7 @@
     align-items: center;
     width: 40px;
     height: 100%;
+    cursor: pointer;
 }
 
     .icon-container img {
@@ -21,10 +22,6 @@
         max-width: 85%;
     }
 
-.icon-container:hover {
-    cursor: pointer;
-}
-
 .account-add-container {
     display: flex;
     flex-direction: row;
@@ -71,7 +68,3 @@
         background: var(--violet-selected);
         cursor: pointer;
     }
-
-.account-icon {
-    fill: var(--line);
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor

@@ -0,0 +1,29 @@
+@using Blazored.FluentValidation
+
+<EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
+    <FluentValidationValidator />
+    <div class="login-form">
+        <div class="login-field">
+            <div class="input-title">@ResourcesKey.EnterUsername</div>
+            <InputText class="input-text"
+                        @bind-Value="UserDto.Username" />
+        </div>
+        <div class="login-field">
+            <div class="input-title">@ResourcesKey.EnterPassword</div>
+            <InputText class="input-text"
+                       @bind-Value="UserDto.Password" />
+        </div>
+        <div class="login-field">
+            <button class="login-button" type="submit" disabled="@IsLoading">
+                @if (IsLoading)
+                {
+                    <div class="loading"></div>
+                }
+                else
+                {
+                    @ResourcesKey.Login
+                }
+            </button>
+        </div>
+    </div>
+</EditForm>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.cs

@@ -0,0 +1,29 @@
+using GameIdeas.Shared.Dto;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace GameIdeas.BlazorApp.Pages.User.Components;
+
+public partial class Login
+{
+    private EditContext? EditContext;
+    private UserDto UserDto = new();
+    private bool IsLoading = false;
+
+    protected override void OnInitialized()
+    {
+        EditContext = new EditContext(UserDto);
+    }
+
+    private async Task HandleLoginSubmit()
+    {
+        if (EditContext?.Validate() == false)
+        {
+            return;
+        }
+
+        IsLoading = true;
+        await Task.Delay(TimeSpan.FromSeconds(5));
+        IsLoading = false;
+    }
+
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.css

@@ -1,21 +1,4 @@
-.account-setting-content {
+.login-form {
-    overflow: hidden;
-    border-radius: var(--big-radius);
-    position: fixed;
-    animation-name: fade-in;
-    animation-duration: 0.4s;
-    border: 2px solid var(--input-selected);
-    background: var(--dropdown-content);
-    right: 10px;
-    margin-top: 4px;
-    z-index: var(--index-floating);
-}
-
-.invisible {
-    display: none;
-}
-
-.login-form {
     display: flex;
     flex-direction: column;
     padding: 20px 8px;
@@ -70,26 +53,3 @@
     animation: loading 1s linear infinite;
     justify-self: center;
 }
-
-.settings-list {
-    display: flex;
-    flex-direction: column;
-}
-
-.line {
-    margin: 0 6px;
-    border-bottom: 2px solid var(--line);
-}
-
-.settings-element {
-    max-width: 140px;
-    height: 40px;
-    padding: 0 26px;
-    align-content: center;
-}
-
-    .settings-element:hover {
-        background: var(--line)
-    }
-
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/LoginValidator.cs

@@ -1,9 +1,9 @@
 using FluentValidation;
 using GameIdeas.Shared.Dto;
 
-namespace GameIdeas.BlazorApp.Shared.Components.Account;
+namespace GameIdeas.BlazorApp.Pages.User.Components;
 
-public class LoginValidator : AbstractValidator<LoginDto>
+public class LoginValidator : AbstractValidator<UserDto>
 {
     public LoginValidator()
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor

@@ -0,0 +1,27 @@
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Constants
+
+<div class="menu">
+    <div class="icon" @onclick=HandleAccountClicked>
+        @Icons.Account
+    </div>
+    <div class="container">
+        @if (ContentVisile)
+        {
+            <div class="content">
+                <div class="menu-element">
+                    @ResourcesKey.UserManager
+                </div>
+                <span class="line"></span>
+                <div class="menu-element" @onclick="HandleLogoutClicked">
+                    @ResourcesKey.Logout
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible="ContentVisile" OnClick="HandleBackdropFilterClicked" />
+
+

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.cs

@@ -0,0 +1,21 @@
+namespace GameIdeas.BlazorApp.Pages.User;
+
+public partial class UserMenu
+{
+    private bool ContentVisile = false;
+
+    private void HandleLogoutClicked()
+    {
+        ContentVisile = false;
+    }
+
+    private void HandleAccountClicked()
+    {
+        ContentVisile = true;
+    }
+
+    private void HandleBackdropFilterClicked()
+    {
+        ContentVisile = false;
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.css

@@ -0,0 +1,48 @@
+.menu {
+    position: relative;
+}
+
+.icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    cursor: pointer;
+}
+
+    .icon ::deep svg {
+        fill: var(--line);
+    }
+
+.container {
+    right: 0;
+    position: absolute;
+    margin-top: 4px;
+    z-index: var(--index-dropdown);
+}
+
+.content {
+    overflow: hidden;
+    border-radius: var(--big-radius);
+    border: 2px solid var(--input-selected);
+    background: var(--dropdown-content);
+    display: flex;
+    flex-direction: column;
+}
+
+.line {
+    margin: 0 6px;
+    border-bottom: 2px solid var(--input-selected);
+}
+
+.menu-element {
+    height: 32px;
+    padding: 0 20px;
+    align-content: center;
+    text-wrap: nowrap;
+    cursor: pointer;
+}
+
+    .menu-element:hover {
+        background: var(--input-selected)
+    }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor

@@ -1,49 +0,0 @@
-@using GameIdeas.Resources
-@using Blazored.FluentValidation;
-
-<div class="account-setting-container" tabindex="1000">
-    <div class="account-setting-content @(ContentVisile ? string.Empty : "invisible")">
-        @if (!IsLogin)
-        {
-            <EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
-                <FluentValidationValidator />
-                <div class="login-form">
-                    <div class="login-field">
-                        <div class="input-title">@ResourcesKey.EnterUsername</div>
-                        <InputText class="input-text"
-                                   @bind-Value="LoginDto.Username" />
-                    </div>
-                    <div class="login-field">
-                        <div class="input-title">@ResourcesKey.EnterPassword</div>
-                        <InputText class="input-text"
-                                   @bind-Value="LoginDto.Password" />
-                    </div>
-                    <div class="login-field">
-                        <button class="login-button" type="submit" disabled="@IsLoading">
-                            @if (IsLoading)
-                            {
-                                <div class="loading"></div>
-                            }
-                            else
-                            {
-                                @ResourcesKey.Login
-                            }
-                        </button>
-                    </div>
-                </div>
-            </EditForm>
-        }
-        else
-        {
-            <div class="settings-list">
-                <div class="settings-element">
-                    @ResourcesKey.UserManager
-                </div>
-                <span class="line"></span>
-                <div class="settings-element" @onclick="HandleLogoutClicked">
-                    @ResourcesKey.Logout
-                </div>
-            </div>
-        }
-    </div>
-</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs

@@ -1,47 +0,0 @@
-using GameIdeas.Shared.Dto;
-using Microsoft.AspNetCore.Components.Forms;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Account;
-
-public partial class AccountSettings
-{
-    private bool ContentVisile = false;
-    private EditContext? EditContext;
-    private LoginDto LoginDto = new();
-    private bool IsLoading = false;
-    private bool IsLogin = true;
-
-    protected override void OnInitialized()
-    {
-        EditContext = new EditContext(LoginDto);
-    }
-
-    public void Close()
-    {
-        ContentVisile = false;
-        StateHasChanged();
-    }
-
-    public void Toggle() 
-    {
-        ContentVisile = !ContentVisile;
-        StateHasChanged();
-    }
-
-    private async Task HandleLoginSubmit()
-    {
-        if (EditContext?.Validate() == false)
-        {
-            return;
-        }
-
-        IsLoading = true;
-        await Task.Delay(TimeSpan.FromSeconds(5));
-        Close();
-        IsLoading = false;
-    }
-    private void HandleLogoutClicked()
-    {
-        Close();
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs

@@ -23,4 +23,8 @@ public static class Icons
     public readonly static MarkupString Game = new(OpenBraket +
         "<path d=\"M6,7H18A5,5 0 0,1 23,12A5,5 0 0,1 18,17C16.36,17 14.91,16.21 14,15H10C9.09,16.21 7.64,17 6,17A5,5 0 0,1 1,12A5,5 0 0,1 6,7M19.75,9.5A1.25,1.25 0 0,0 18.5,10.75A1.25,1.25 0 0,0 19.75,12A1.25,1.25 0 0,0 21,10.75A1.25,1.25 0 0,0 19.75,9.5M17.25,12A1.25,1.25 0 0,0 16,13.25A1.25,1.25 0 0,0 17.25,14.5A1.25,1.25 0 0,0 18.5,13.25A1.25,1.25 0 0,0 17.25,12M5,9V11H3V13H5V15H7V13H9V11H7V9H5Z\">" +
         CloseBraket);
+
+    public readonly static MarkupString Account = new(OpenBraket +
+        "<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\" />" +
+        CloseBraket);
 }