feat(Navigation) Added a search button for desktop users

Components/Components.csproj

@@ -15,7 +15,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <SupportedPlatform Include="browser"/>
+        <SupportedPlatform Include="browser" />
     </ItemGroup>
 
     <ItemGroup>
@@ -25,14 +25,14 @@
     </ItemGroup>
 
     <ItemGroup>
-        <Folder Include="Inputs\"/>
+        <Folder Include="Inputs\" />
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\Model\Model.csproj"/>
-        <ProjectReference Include="..\Services\Services.csproj"/>
+        <ProjectReference Include="..\Model\Model.csproj" />
+        <ProjectReference Include="..\Services\Services.csproj" />
     </ItemGroup>
     <ItemGroup>
-        <None Remove="Inputs\"/>
+        <None Remove="Inputs\" />
     </ItemGroup>
 </Project>

Components/Form/FormTextComponent.razor

@@ -12,6 +12,7 @@
                type="text"
                value="@Value"
                id="@labelId"
+               @oninput="OnChange"
                @onchange="OnChange"/>
     </div>
     @if (Info != "")
@@ -61,6 +62,7 @@
 
     [Parameter]
     public EventCallback<ChangeEventArgs> OnChange { get; set; }
+    
 
     [Parameter]
     public bool ReadOnly { get; set; }

Components/Inputs/SearchButtonComponent.razor

@@ -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");
+    }
+}

Components/Navigation/DesktopNavComponent.razor

@@ -16,6 +16,7 @@
             IGP Fan Reference
         </NavLink>
 
+        <div class="sectionNavs">
         @foreach (var webSection in WebSections)
         {
             var isSelected = navigationService.GetNavigationSectionId().Equals(webSection.Id);
@@ -25,7 +26,7 @@
                 sectionButtonStyle += " sectionButtonSelected";
             }
             
-            <div>
+            <div class="sectionNav">
                 <button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle">@webSection.Name</button>
 
                 @if (isSelected)
@@ -38,6 +39,9 @@
                 }
             </div>
         }
+        </div>
+        
+        <SearchButtonComponent />
     </div>
 </div>
 
@@ -57,10 +61,7 @@
 
     .sectionButton {
         cursor: pointer;  
-        padding-left: 12px;
-        padding-right: 12px;
-        padding-top: 10px;
-        top: -11px;
+        padding: 12px;
         position: relative;
         z-index: 50000;
     }
@@ -78,15 +79,33 @@
         border-bottom: 4px solid black;
         position: fixed;
         width: 100%;
-        padding: 12px;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        
+        padding-left: 24px;
+        padding-right: 24px;
+                
         display: flex;
-        justify-content: center;
-        gap: 8px;
-        height: 50px;
         background-color: var(--accent);
+        
+        justify-content: space-between;
+        align-items: center;
+        
     }
 
 
+    .sectionNavs {
+        display: flex;
+        gap: 8px;  
+        align-items: center;
+    }
+
+.sectionNav {
+    display: flex;
+        align-items: center;
+        height: 100%;
+}
+
     .websiteTitle {
         font-weight: bold;
         color: white;
@@ -95,8 +114,8 @@
 
     .navMenuPosition {
        position: relative;
-       top: calc(100% - 36px);
-       left: calc(50% + -330px / 2);
+       top: 18px;
+       left: calc(-50% + -330px / 2);
        width: 0;
        height: 0;
     }
@@ -119,7 +138,6 @@
     }
     
     .sectionButtonSelected {
-        padding-bottom: 14px;
         box-shadow: 0 2px 3px black;
         background-color: var(--info);
         transform: translateY(-1px) scale(1.08);

Components/_Imports.razor

@@ -15,4 +15,5 @@
 @using System.Threading.Tasks;
 @using System.Timers;
 @using System;
-@using YamlDotNet.Serialization
+@using YamlDotNet.Serialization
+@using Components.Inputs;