fix(): last fixes

Author: Fdom92

src/pages/app-blog/app-blog.scss

@@ -167,6 +167,21 @@
       }
     }
 
+    .blog-search-input-top {
+      padding: 4px 4px 4px calc(2.4rem + 2px);
+      border: none;
+      background-color: #f4f5f9;
+      border-radius: 3px;
+      width: 85%;
+      height: 32px;
+      font-family: Muli;
+      color: #5d534e;
+      font-size: 13px;
+      font-weight: 300;
+      line-height: 18px;
+      border: 1.5px solid rgba(0, 0, 0, 0.15);
+    }
+
     .blog-search-icon {
       position: absolute;
       margin-top: 10px;
@@ -179,6 +194,17 @@
       }
     }
 
+    .blog-search-icon-top {
+      position: absolute;
+      margin-top: 10px;
+      margin-left: 10px;
+      color: #615853;
+    }
+
+    .searchbar-top {
+      display: flex;
+    }
+
     .blog-filters-list {
       display: flex;
       flex-direction: row;

src/pages/app-blog/app-blog.tsx

@@ -32,6 +32,8 @@ export class AppBlog {
   @State() searchIsError: boolean = false;
   @State() searchIsLoading: boolean = false;
 
+  @State() displaySearchBar: boolean = false;
+
   pageSize = 3;
   indexOfFeaturedPost = -1;
   pageOfFeaturedPost = 0;
@@ -318,6 +320,14 @@ export class AppBlog {
     return pagination;
   }
 
+  showSearchbar() {
+    this.displaySearchBar = true;
+  }
+
+  hideSearchBar() {
+    this.displaySearchBar = false;
+  }
+
   render() {
     const featuredPost = this.renderFeaturedPost(this.featuredPost, this.featuredIsLoading, this.featuredIsError);
     const filters = this.renderFilters(this.blogFilter, this.searchIsLoading || this.blogIsLoading, this.searchQuery);
@@ -340,24 +350,36 @@ export class AppBlog {
         <div id="blog-filters" class="blog-filters">
           <div class="blog-filters-nav">
             <div class="blog-search-group d-md-none">
-              <span class="blog-search-icon fa fa-search" />
+              <span class="blog-search-icon-top fa fa-search" />
               <input id="blog-search" type="search" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
             </div>
 
-            <ul class="blog-filters-list">
-              {filters}
-              <li class="blog-filter-item d-none d-lg-block">
+            {this.displaySearchBar ? (
+              <div class="searchbar-top">
                 <div class="blog-search-group">
-                  <span class="blog-search-icon fa fa-search" />
-                  <input id="blog-search" type="search" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
+                  <span class="blog-search-icon-top fa fa-search" />
+                  <input id="blog-search" type="search" class="blog-search-input-top" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
                 </div>
-              </li>
-              <li class="blog-filter-item d-lg-none">
-                <div class="blog-search-group">
-                  <span class="blog-search-icon fa fa-search" />
-                </div>
-              </li>
-            </ul>
+                <button onClick={() => this.hideSearchBar()}>
+                  <i class="far fa-times-circle" />
+                </button>
+              </div>
+            ) : (
+              <ul class="blog-filters-list">
+                {filters}
+                <li class="blog-filter-item d-none d-lg-block">
+                  <div class="blog-search-group">
+                    <span class="blog-search-icon fa fa-search" />
+                    <input id="blog-search" type="search" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
+                  </div>
+                </li>
+                <li class="blog-filter-item d-lg-none" onClick={() => this.showSearchbar()}>
+                  <div class="blog-search-group">
+                    <span class="blog-search-icon fa fa-search" />
+                  </div>
+                </li>
+              </ul>
+            )}
           </div>
         </div>
         <div class="row posts-row">