feat(Navigation) Added a search button for desktop users

2022-04-16 14:49:51 -04:00
parent 5d5a0bde59
commit b9e3633d1c
26 changed files with 578 additions and 61 deletions
@@ -0,0 +1,61 @@
+@using System.Runtime.InteropServices
+@inject ISearchService searchService
+@inject NavigationManager navigationManager
+@inject IJSRuntime jsRuntime
+
+<button class="searchButtonContainer" @onclick="ButtonClicked">
+    <div class="searchText">
+        Search...
+    </div>
+    @if (false)
+    {
+        <div class="searchHotkey">
+            @CommandKey + K
+        </div>
+        
+    }
+</button>
+
+<style>
+    .searchButtonContainer {
+        background-color: var(--primary);
+        border: 2px solid var(--primary-border);
+        border-radius: 8px;
+        font-weight: 800;
+        width: 350px;
+        
+        padding: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content:  space-between;
+        align-items: center;
+        
+    }
+    
+    .searchHotkey {
+        padding:  2px;
+        
+        border: 2px solid var(--primary-border);
+    }
+    
+</style>
+
+
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } = default!;
+
+    private string userAgent = "";
+
+    string CommandKey => userAgent.Contains("Mac OS") ? "CMD" : "Ctrl";
+    
+    private void ButtonClicked(EventArgs eventArgs)
+    {
+        searchService.Show();
+    }
+    
+    protected override async Task OnInitializedAsync()
+    {
+        userAgent = await jsRuntime.InvokeAsync<string>("getUserAgent");
+    }
+}