refactoring select list

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

@@ -11,12 +11,17 @@
 }
 
 /***** 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 *****/

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor

@@ -5,9 +5,13 @@
     <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">
+
+        @if (ContentVisile)
+        {
+            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
                 @foreach (var item in Headers)
                 {
                     <SelectListElement TItem="TItem"
@@ -27,6 +31,7 @@
                                        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 {