src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor

@@ -1,8 +1,10 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Components.SelectSearch
+@using GameIdeas.BlazorApp.Shared.Constants
 @using GameIdeas.Shared.Dto
 
-<div class="advanced-filter-container">
+<div class="advanced-filter-container" style="@(ExpandedFilter ? "display: flex" : "")">
     <span class="title">@ResourcesKey.Filters</span>
 
     <div class="duplicate">
@@ -30,3 +32,10 @@
 
     <span class="title">@ResourcesKey.LastAdd</span>
 </div>
+
+<button type="button" class="open-filter" @onclick=HandleExpandFilter>
+    @Icons.Filter
+</button>
+
+<BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="true"
+                AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs

@@ -1,4 +1,5 @@
 using GameIdeas.BlazorApp.Helpers;
+using GameIdeas.BlazorApp.Shared.Components.BackdropFilter;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;
@@ -13,6 +14,8 @@ public partial class AdvancedGameFilter
     [Parameter] public EventCallback<GameFilterParams> GameFilterChanged { get; set; }
 
     private readonly SelectTheme Theme = SelectTheme.AdvancedFilter;
+    private bool ExpandedFilter;
+    private BackdropFilter? BackdropFilter;
 
     private async Task HandleValueChanged()
     {
@@ -45,4 +48,13 @@ public partial class AdvancedGameFilter
 
         throw new ArgumentNullException(ResourcesKey.ErrorStorageSpaceLabel);
     }
+    private void HandleExpandFilter(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+    {
+        ExpandedFilter = true;
+        BackdropFilter?.Show();
+    }
+    private void HandleBackdropFilterClicked()
+    {
+        ExpandedFilter = false;
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css

@@ -2,15 +2,39 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    padding-right: 20px;
-    padding-left: 10px;
+    padding: 0 20px;
     min-height: calc(100vh - 80px);
     box-sizing: border-box;
-    width: 100%;
+    width: 260px;
     border-left: 2px solid var(--line);
     z-index: var(--index-content);
 }
 
+.open-filter {
+    padding: 0;
+    display: none;
+    position: fixed;
+    outline: none;
+    border: none;
+    background: var(--input-primary);
+    border-radius: 100px;
+    right: 10px;
+    bottom: 10px;
+    overflow: hidden;
+    z-index: var(--index-floating);
+}
+
+.open-filter ::deep svg {
+    fill: var(--white);
+    width: 24px;
+    height: 24px;
+    padding: 10px;
+}
+
+    .open-filter:hover ::deep svg {
+        background: var(--input-selected);
+    }
+
 .duplicate {
     display: none;
     flex-direction: column;
@@ -30,3 +54,28 @@
         display: flex;
     }
 }
+
+@media screen and (max-width: 700px) {
+    .advanced-filter-container {
+        display: none;
+    }
+
+    .open-filter {
+        display: flex;
+    }
+
+    .advanced-filter-container {
+        border-radius: var(--big-radius) 0 0 var(--big-radius);
+        background: var(--input-primary);
+        border: none;
+        right: 0;
+        position: fixed;
+        z-index: 800;
+        width: auto;
+        height: auto;
+        left: 25vw;
+        bottom: 0;
+        top: 0;
+        padding: 60px 20px;
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css

@@ -63,6 +63,12 @@
     padding-right: 1px;
 }
 
+@media screen and (max-width: 700px) {
+    .slider-container {
+        display: none;
+    }
+}
+
 @media screen and (max-width: 1000px) {
     .select-container {
         display: none;

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

@@ -1,6 +1,5 @@
 .container {
-    display: grid;
-    grid-template-columns: 1fr 240px;
+    display: flex;
     padding: 20px 0;
     height: fit-content;
 }
@@ -11,4 +10,5 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
+    width: 100%;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css

@@ -4,7 +4,6 @@
     justify-content: space-between;
     align-items: flex-end;
     padding: 0px 10px;
-    height: 40px;
 }
 
 .icon-container {
@@ -12,14 +11,14 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    width: 40px;
-    height: 100%;
     cursor: pointer;
+    margin-right: 10px;
+
 }
 
     .icon-container img {
-        max-height: 85%;
-        max-width: 85%;
+        width: 34px;
+        height: 34px;
     }
 
 .content {

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

@@ -43,4 +43,8 @@ public static class Icons
     public readonly static MarkupString Back = new(OpenBraket +
         "<path d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\" />" +
         CloseBraket);
+
+    public readonly static MarkupString Filter = new(OpenBraket +
+        "<path d=\"M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z\" />" +
+        CloseBraket);
 }