search bar finished

WatchIt.Common/WatchIt.Common.Query/QueryParameters.cs

@@ -66,7 +66,7 @@ public abstract class QueryParameters
         (
             !string.IsNullOrEmpty(property) 
             && 
-            new Regex(regexQuery).IsMatch(property)
+            Regex.IsMatch(property, regexQuery, RegexOptions.IgnoreCase)
         )
     );
 

WatchIt.Website/WatchIt.Website/App.razor

@@ -11,7 +11,7 @@
     <!-- CSS -->
     <link rel="stylesheet" href="css/general.css?version=0.2.0.3"/>
     <link rel="stylesheet" href="css/main_button.css?version=0.2.0.0"/>
-    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.9"/>
+    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.11"/>
     
     <!-- BOOTSTRAP -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor

@@ -20,7 +20,23 @@
                                     </a>
                                 </div>
                                 <div class="col-auto">
-                                    menu
+                                    <div class="d-flex gap-2 align-items-center">
+                                        @if (_searchbarVisible)
+                                        {
+                                            <div class="input-group input-group-sm">
+                                                <InputText class="form-control" placeholder="Search with regex" @bind-Value="@(_searchbarText)"/>
+                                            </div>
+                                            <button type="button" class="btn btn-sm btn-outline-secondary" @onclick="@(SearchStart)">⌕</button>
+                                            <a id="searchbarCancel" @onclick="@(() => _searchbarVisible = false)">
+                                                <img src="assets/icons/cancel.png" alt="cancel_icon" height="20" width="20"/>
+                                            </a>
+                                        }
+                                        else
+                                        {
+                                            <button type="button" class="btn btn-sm">Rankings</button>
+                                            <button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = true)">⌕</button>
+                                        }
+                                    </div>
                                 </div>
                                 <div class="col">
                                     <div class="float-end">

WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs

@@ -1,3 +1,4 @@
+using System.Net;
 using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model.Accounts;
 using WatchIt.Common.Model.Photos;
@@ -33,6 +34,9 @@ public partial class MainLayout : LayoutComponentBase
     private PhotoResponse? _defaultBackgroundPhoto;
     private AccountProfilePictureResponse? _userProfilePicture;
     
+    private bool _searchbarVisible;
+    private string _searchbarText = string.Empty;
+    
     #endregion
     
     
@@ -108,6 +112,19 @@ public partial class MainLayout : LayoutComponentBase
     
     #endregion
     
+    #region Search
+
+    private void SearchStart()
+    {
+        if (!string.IsNullOrWhiteSpace(_searchbarText))
+        {
+            string query = WebUtility.UrlEncode(_searchbarText);
+            NavigationManager.NavigateTo($"/search/{query}");
+        }
+    }
+    
+    #endregion
+    
     #region User menu
     
     private async Task UserMenuLogOut()

WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css

@@ -11,3 +11,8 @@ h1 {
 #logo {
     font-size: 40px;
 }
+
+#searchbarCancel {
+    cursor: pointer;
+    color: #6c757d;
+}