From ce0c43b48a96fd6bf421662b7a2a9778849b4f5c Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 2 Mar 2025 17:55:17 +0100
Subject: [PATCH] refactoring select list

---
 .../Components/SelectListElement.razor.css    | 15 ++++--
 .../Shared/Components/Select/SelectList.razor | 49 ++++++++++---------
 .../Components/Select/SelectList.razor.cs     |  1 -
 .../Components/Select/SelectList.razor.css    | 26 +++++-----
 .../Shared/Layouts/Header/HeaderLayout.razor  |  3 +-
 .../Layouts/Header/HeaderLayout.razor.css     |  2 +-
 6 files changed, 55 insertions(+), 41 deletions(-)

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
index e7c5314..9f39b89 100644
--- 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
@@ -11,13 +11,18 @@
 }
 
 /***** Navigation Theme *****/
-.navigation .selected {
-    display: none;
+.navigation {
+    padding: 4px 8px;
+    width: 100%;
 }
 
-.navigation .select-label:hover {
-    color: var(--light-grey);
-}
+.navigation .selected {
+    display: none;
+} 
+
+    .navigation:hover {
+        background: var(--violet-selected);
+    }
 
 /***** Sort Theme *****/
 .sort .select-label:hover {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
index 2a47bd3..0aee122 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -5,28 +5,33 @@
     <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 @ref=Container @onfocusout=HandleFocusOut
+        class="select-container @(AlignRight ? "align-right" : "")" 
+        tabindex="1000">
+
+        @if (ContentVisile)
+        {
+            <div class="select-content @(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
index 415c24e..e8cca12 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -47,7 +47,6 @@ public partial class SelectList<TItem>
         selectedValue.IsSelected = true;
         Value = selectedValue.Item;
         await ValueChanged.InvokeAsync(Value);
-        Close();
     }
 
     private async Task HandleHeaderClicked(SelectElement<TItem> selectedValue)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index 843330c..ead1cd6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -1,16 +1,23 @@
-.select-content {
+.select-list {
+    position: relative;
+}
+
+.select-container {
+    margin-top: 4px;
+    position: absolute;
+}
+
+.align-right {
+    right: 0;
+}
+
+.select-content {
     overflow: hidden;
     display: flex;
     flex-direction: column;
     border-radius: var(--small-radius);
-    position: fixed;
     animation-name: fade-in;
     animation-duration: 0.4s;
-    margin-top: 4px;
-}
-
-.invisible {
-    display: none;
 }
 
 .line {
@@ -18,19 +25,16 @@
     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;
 }
 
 /***** 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/Layouts/Header/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
index dc9b0dc..9c1b917 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -24,7 +24,8 @@
                 <SelectList TItem="AddType"
                             Items="SelectElements"
                             ValueChanged=HandleAddTypeClickedAsync
-                            Theme="SelectListTheme.Navigation">
+                            Theme="SelectListTheme.Navigation"
+                            AlignRight=true>
                     <Button>
                         <div class="second-button button">
                             <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
index 3648621..7661644 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
@@ -42,7 +42,7 @@
     flex-direction: row;
     background: var(--violet);
     border-radius: var(--small-radius);
-    overflow: hidden;
+    overflow: visible;
 }
 
 .button {