Added search component

Author: linkdotnet

LinkDotNet.Blog.Web/Shared/NavMenu.razor

@@ -18,6 +18,9 @@
                         <li><a target="_blank" href="@_configuration.GithubAccountUrl"><i class="fab fa-github"></i> Github</a></li>
                     }
                     <AccessControl></AccessControl>
+                    <li>
+                        <SearchInput></SearchInput>
+                    </li>
                 </ul>
             </div>
         </div>

LinkDotNet.Blog.Web/Shared/SearchInput.razor

@@ -0,0 +1,9 @@
+<div class="search-bar">
+    <input type="text" class="search-bar-input" placeholder="search" aria-label="search"/>
+    <button class="search-bar-button" aria-label="search submit"><i class="fas fa-search"></i></button>
+</div>
+
+@code {
+    [Parameter]
+    public string Value { get; set; }
+}

LinkDotNet.Blog.Web/Shared/SearchInput.razor.css

@@ -0,0 +1,52 @@
+.search-bar {
+    border: 2px solid white;
+    display: flex;
+    border-radius: 100vh;
+    overflow: hidden;
+    height: 45px;
+    padding: 3px;
+    width: 45px;
+    position: relative;
+    transition: width 300ms ease-in-out;
+}
+
+.search-bar-input {
+    flex-grow: 1;
+    padding: 0 .5em;
+    border: 0;
+    opacity: 0;
+    background: transparent;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    cursor: pointer;
+    color:white;
+}
+
+.search-bar-input:focus {
+    outline: 0;
+}
+
+.search-bar-button {
+    color: white;
+    border: 0;
+    border-radius: 100vh;
+    margin-left: auto;
+    width: calc(45px - 10px);
+    height: calc(45px - 10px);
+    cursor: pointer;
+    background: transparent;
+}
+
+.search-bar:focus-within {
+    width: 170px;
+}
+
+.search-bar:focus-within .search-bar-input {
+    cursor: initial;
+    opacity: 1;
+    z-index: initial;
+    max-width: 130px;
+}