From 512deb6eaca8b5cd80d2ccdda559ac7cfaceca44 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sat, 1 Mar 2025 21:25:52 +0100
Subject: [PATCH] refactoring dropdown

---
 .../Pages/Games/GamesBase.razor               | 10 +--
 .../Pages/Games/Header/HeaderGame.razor       |  3 +-
 .../Pages/Games/Header/HeaderGame.razor.cs    |  4 +-
 .../Account}/AccountSettings.razor            |  2 +-
 .../Account}/AccountSettings.razor.cs         |  2 +-
 .../Account}/AccountSettings.razor.css        |  0
 .../Components/Dropdown/DropdownContent.razor | 13 ----
 .../Dropdown/DropdownContent.razor.cs         | 36 -----------
 .../Components/Dropdown/DropdownTheme.cs      |  7 --
 .../Select/Components/SelectListElement.razor | 15 +++++
 .../Components/SelectListElement.razor.cs     | 18 ++++++
 .../Components/SelectListElement.razor.css    | 25 ++++++++
 .../Shared/Components/Select/SelectElement.cs |  8 +++
 .../Shared/Components/Select/SelectList.razor | 32 ++++++++++
 .../Components/Select/SelectList.razor.cs     | 64 +++++++++++++++++++
 .../SelectList.razor.css}                     | 29 +++++----
 .../Shared/Components/Select/SelectTheme.cs   |  8 +++
 .../Shared/Headers/HeaderBaseComponent.cs     |  5 --
 .../Header/HeaderLayout.razor}                | 34 +++++-----
 .../Header/HeaderLayout.razor.cs}             | 16 +++--
 .../Header/HeaderLayout.razor.css}            |  0
 .../Header}/LoginValidator.cs                 |  2 +-
 22 files changed, 227 insertions(+), 106 deletions(-)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor (96%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor.cs (95%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor.css (100%)
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/{Dropdown/DropdownContent.razor.css => Select/SelectList.razor.css} (53%)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor => Layouts/Header/HeaderLayout.razor} (58%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor.cs => Layouts/Header/HeaderLayout.razor.cs} (61%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor.css => Layouts/Header/HeaderLayout.razor.css} (100%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Layouts/Header}/LoginValidator.cs (86%)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index 8b7779d..0e9af03 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -2,13 +2,15 @@
 @using GameIdeas.BlazorApp.Layouts
 @using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
-@using GameIdeas.BlazorApp.Shared.Headers
+@using GameIdeas.BlazorApp.Shared.Layouts.Header
 @using GameIdeas.Resources
 
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<HeaderBase>
-    <HeaderGame />
-</HeaderBase>
+<HeaderLayout>
+    <Body>
+        <HeaderGame />
+    </Body>
+</HeaderLayout>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
index afd8803..171fad3 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
@@ -1,4 +1,3 @@
-@using GameIdeas.BlazorApp.Shared.Headers
-@inherits HeaderBaseComponent
+
 
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
index f58f625..875ea39 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
@@ -1,8 +1,6 @@
-using GameIdeas.BlazorApp.Shared.Headers;
-
 namespace GameIdeas.BlazorApp.Pages.Games.Header;
 
-public partial class HeaderGame : HeaderBaseComponent
+public partial class HeaderGame
 {
 
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
similarity index 96%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
index 578eead..22c10b9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
@@ -1,7 +1,7 @@
 @using GameIdeas.Resources
 @using Blazored.FluentValidation;
 
-<div class="account-setting-container" tabindex="1001">
+<div class="account-setting-container" tabindex="1000">
     <div class="account-setting-content @(ContentVisile ? string.Empty : "invisible")">
         @if (!AuthentificationService.IsLogin)
         {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
similarity index 95%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
index 97ff274..68ede95 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
@@ -2,7 +2,7 @@ using GameIdeas.BlazorApp.Services;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components.Forms;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Components.Account;
 
 public partial class AccountSettings (
     AuthentificationService AuthentificationService)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
similarity index 100%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
deleted file mode 100644
index 1ddac6b..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
+++ /dev/null
@@ -1,13 +0,0 @@
-@typeparam TItem
-
-<div @ref=Content class="dropdown-container" tabindex="1000"
-        @onfocusout=HandleDropdownAddFocusOut>
-    <div class="dropdown-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
-        @foreach (var item in Items)
-        {
-            <div class="drowdown-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
-                @(LabelSelector != null ? LabelSelector.Invoke(item) : item?.ToString())
-            </div>
-        }
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
deleted file mode 100644
index 97c8b71..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
+++ /dev/null
@@ -1,36 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
-
-public partial class DropdownContent<TItem>
-{
-    [Parameter] public TItem? Value { get; set; }
-    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
-    [Parameter] public IEnumerable<TItem> Items { get; set; } = [];
-    [Parameter] public Func<TItem, string>? LabelSelector { get; set; }
-    [Parameter] public DropdownTheme Theme { get; set; }
-
-    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 HandleDropdownAddFocusOut()
-    {
-        ContentLastFocusOut = DateTime.Now;
-        ContentVisile = false;
-    }
-
-    private async Task HandleItemClicked() => await ValueChanged.InvokeAsync(Value);
-
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
deleted file mode 100644
index e225ac5..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
+++ /dev/null
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
-
-public enum DropdownTheme
-{
-    Navigation,
-    Account
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
new file mode 100644
index 0000000..837f2ad
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
@@ -0,0 +1,15 @@
+@typeparam TItem
+
+<div class="select-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
+    <div class="selected">
+        @if (Value != null && Value.IsSelected)
+        {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />
+            </svg>
+        }
+    </div>
+    <div class="select-label">
+        @Value?.Label
+    </div>
+</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
new file mode 100644
index 0000000..c33f01a
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
+
+public partial class SelectListElement<TItem>
+{
+    [Parameter] public EventCallback<SelectElement<TItem>?> ValueChanged { get; set; }
+    [Parameter] public SelectElement<TItem>? Value { get; set; }
+    [Parameter] public SelectListTheme Theme { get; set; }
+    private async Task HandleItemClicked()
+    {
+        if (Value != null)
+        {
+            Value.IsSelected = true;
+            await ValueChanged.InvokeAsync(Value);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
new file mode 100644
index 0000000..e7c5314
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -0,0 +1,25 @@
+.select-element {
+    width: fit-content;
+}
+
+    .select-element:hover {
+        cursor: pointer;
+    }
+
+.selected svg {
+    fill: var(--white)
+}
+
+/***** Navigation Theme *****/
+.navigation .selected {
+    display: none;
+}
+
+.navigation .select-label:hover {
+    color: var(--light-grey);
+}
+
+/***** Sort Theme *****/
+.sort .select-label:hover {
+    color: var(--light-grey);
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
new file mode 100644
index 0000000..b6a9299
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectElement.cs
@@ -0,0 +1,8 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public class SelectElement<TItem>
+{
+    public TItem? Item { get; set; }
+    public string? Label { get; set; }
+    public bool IsSelected { get; set; } = false;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
new file mode 100644
index 0000000..2a47bd3
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -0,0 +1,32 @@
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@typeparam TItem
+
+<div class="select-list" @onclick=HandleButtonClicked>
+    <div class="select-button">
+        @Button
+    </div>
+    <div @ref=Container class="select-container" tabindex="1000"
+         @onfocusout=HandleFocusOut>
+        <div class="select-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
+            @foreach (var item in Headers)
+            {
+                <SelectListElement TItem="TItem"
+                                   Value="item"
+                                   ValueChanged="HandleHeaderClicked"
+                                   Theme="Theme"/>
+            }
+            @if (Headers.Any())
+            {
+                <span class="line"></span>
+            }
+            @foreach (var item in Items)
+            {
+                <SelectListElement TItem="TItem"
+                                   Value="item"
+                                   ValueChanged="HandleItemClicked"
+                                   Theme="Theme" />
+            }
+        </div>
+    </div>
+</div>
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
new file mode 100644
index 0000000..415c24e
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -0,0 +1,64 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public partial class SelectList<TItem> 
+{
+    [Parameter] public RenderFragment? Button { get; set; }
+    [Parameter] public TItem? Value { get; set; }
+    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
+    [Parameter] public TItem? Header { get; set; }
+    [Parameter] public EventCallback<TItem?> HeaderChanged { get; set; }
+    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
+    [Parameter] public IEnumerable<SelectElement<TItem>> Headers { get; set; } = [];
+    [Parameter] public SelectListTheme Theme { get; set; }
+    [Parameter] public bool AlignRight { get; set; }
+
+    private bool ContentVisile = false;
+    private DateTime ContentLastFocusOut = DateTime.Now;
+    private ElementReference Container;
+
+    public async Task OpenAsync()
+    {
+        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
+        {
+            await Container.FocusAsync();
+            ContentVisile = true;
+        }
+    }
+
+    public void Close() => ContentVisile = false;
+
+    private async Task HandleButtonClicked() => await OpenAsync();
+
+    private void HandleFocusOut()
+    {
+        ContentLastFocusOut = DateTime.Now;
+        ContentVisile = false;
+    }
+
+    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
+    {
+        foreach (var item in Items)
+        {
+            item.IsSelected = false;
+        }
+
+        selectedValue.IsSelected = true;
+        Value = selectedValue.Item;
+        await ValueChanged.InvokeAsync(Value);
+        Close();
+    }
+
+    private async Task HandleHeaderClicked(SelectElement<TItem> selectedValue)
+    {
+        foreach (var header in Headers)
+        {
+            header.IsSelected = false;
+        }
+
+        selectedValue.IsSelected = true;
+        Header = selectedValue.Item;
+        await HeaderChanged.InvokeAsync(Header);
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
similarity index 53%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index 253d8f6..843330c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -1,4 +1,4 @@
-.dropdown-content {
+.select-content {
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -9,25 +9,28 @@
     margin-top: 4px;
 }
 
-.drowdown-element {
-    width: fit-content;
-}
-
-    .drowdown-element:hover {
-        cursor: pointer;
-    }
-
 .invisible {
     display: none;
 }
 
-.dropdown-content.navigation {
+.line {
+    margin: 0 6px;
+    border-bottom: 2px solid var(--light-grey);
+}
+
+/***** Navigation Theme *****/
+.select-content.navigation {
     gap: 4px;
     background: var(--violet);
     box-shadow: var(--drop-shadow);
     padding: 4px 6px;
 }
 
-    .drowdown-element.navigation:hover {
-        color: var(--light-grey);
-    }
+/***** Sort Theme *****/
+.select-content.sort {
+    gap: 4px;
+    background: var(--black);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 6px;
+}
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
new file mode 100644
index 0000000..f3bb87f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectTheme.cs
@@ -0,0 +1,8 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public enum SelectListTheme
+{
+    Navigation,
+    Sort,
+    Filter
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
deleted file mode 100644
index 79f09b8..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBaseComponent.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Headers;
-
-public class HeaderBaseComponent : ComponentBase;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
similarity index 58%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
index 71f784f..b18fedc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -1,14 +1,18 @@
 @using GameIdeas.BlazorApp.Pages.Games
 @using GameIdeas.BlazorApp.Pages.Games.Models
+@using GameIdeas.BlazorApp.Shared.Components.Account
 @using GameIdeas.BlazorApp.Shared.Components.Dropdown
+@using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.Resources
 
+@inherits LayoutComponentBase
+
 <div class="header-tab">
     <div class="icon-container" @onclick="HandleIconClicked">
-        <img src="icon.png" alt="Game Ideas">        
+        <img src="icon.png" alt="Game Ideas">
     </div>
 
-    @Header
+    @Body
 
     <div class="account-add-container">
         <div class="add-container">
@@ -18,21 +22,21 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <div class="second-button button" @onclick=HandleMoreButton>
-                    <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                        <path d="M1 3H23L12 22" />
-                    </svg>
-                </div>
-            </div>
-            <DropdownContent @ref="DropdownAdd"
-                             TItem="AddTypeParams"
-                             ValueChanged=HandleAddTypeClickedAsync
-                             Items="AddTypes"
-                             LabelSelector="(addtype => addtype.Label)"
-                             Theme="DropdownTheme.Navigation" />
+                <SelectList TItem="AddType"
+                            Items="SelectElements"
+                            ValueChanged=HandleAddTypeClickedAsync
+                            Theme="SelectListTheme.Navigation">
+                    <Button>
+                        <div class="second-button button">
+                            <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <path d="M1 3H23L12 22" />
+                            </svg>
+                        </div>
+                    </Button>
+                </SelectList>
         </div>
         <div class="account-container">
-            <div class="icon-container">
+            <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>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
similarity index 61%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
index 181a72e..b3a43f7 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
@@ -1,15 +1,21 @@
 using GameIdeas.BlazorApp.Pages.Games.Models;
+using GameIdeas.BlazorApp.Shared.Components.Account;
 using GameIdeas.BlazorApp.Shared.Components.Dropdown;
+using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
 
-public partial class HeaderBase
+public partial class HeaderLayout : LayoutComponentBase
 {
-    [Parameter] public HeaderBaseComponent? Header { get; set; }
     [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
 
+    private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
+        new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },
+        new SelectElement<AddType> { Item = AddType.Auto, Label = ResourcesKey.AutoAdd }
+    ];
+
     private DropdownContent<AddTypeParams>? DropdownAdd;
     private readonly IEnumerable<AddTypeParams> AddTypes =
     [
@@ -34,9 +40,9 @@ public partial class HeaderBase
         AccountSettings?.Close();
     }
 
-    private async Task HandleAddTypeClickedAsync(AddTypeParams value)
+    private async Task HandleAddTypeClickedAsync(AddType value)
     {
-        await AddTypeChanged.InvokeAsync(value.AddType);
+        await AddTypeChanged.InvokeAsync(value);
     }
 
     private void HandleAccountClicked()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
similarity index 100%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
similarity index 86%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
index 931bd7b..14cd426 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/LoginValidator.cs
@@ -1,7 +1,7 @@
 using FluentValidation;
 using GameIdeas.Shared.Dto;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
 
 public class LoginValidator : AbstractValidator<LoginDto>
 {