refactoring select list

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css

@@ -11,13 +11,18 @@
 }
 
 /***** Navigation Theme *****/
+.navigation {
+    padding: 4px 8px;
+    width: 100%;
+}
+
 .navigation .selected {
     display: none;
 } 
 
-.navigation .select-label:hover {
+    .navigation:hover {
-    color: var(--light-grey);
+        background: var(--violet-selected);
-}
+    }
 
 /***** Sort Theme *****/
 .sort .select-label:hover {

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"
+    <div @ref=Container @onfocusout=HandleFocusOut
-         @onfocusout=HandleFocusOut>
+        class="select-container @(AlignRight ? "align-right" : "")" 
-        <div class="select-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
+        tabindex="1000">
-            @foreach (var item in Headers)
+
-            {
+        @if (ContentVisile)
-                <SelectListElement TItem="TItem"
+        {
-                                   Value="item"
+            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
-                                   ValueChanged="HandleHeaderClicked"
+                @foreach (var item in Headers)
-                                   Theme="Theme"/>
+                {
-            }
+                    <SelectListElement TItem="TItem"
-            @if (Headers.Any())
+                                       Value="item"
-            {
+                                       ValueChanged="HandleHeaderClicked"
-                <span class="line"></span>
+                                       Theme="Theme" />
-            }
+                }
-            @foreach (var item in Items)
+                @if (Headers.Any())
-            {
+                {
-                <SelectListElement TItem="TItem"
+                    <span class="line"></span>
-                                   Value="item"
+                }
-                                   ValueChanged="HandleItemClicked"
+                @foreach (var item in Items)
-                                   Theme="Theme" />
+                {
-            }
+                    <SelectListElement TItem="TItem"
-        </div>
+                                       Value="item"
+                                       ValueChanged="HandleItemClicked"
+                                       Theme="Theme" />
+                }
+            </div>
+        }
     </div>
 </div>
 

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)

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;
 }
 

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">

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 {