fixes search bar

Author: SachaWildCode

src/app/components/searchbar/searchbar.component.html

@@ -27,4 +27,7 @@
     <option value="">asso2</option>
     <option value="">asso3</option>
   </select>
+  <button type="button" class="btn-filter">
+    <fa-icon [icon]="faFilter"></fa-icon>
+  </button>
 </main>

src/app/components/searchbar/searchbar.component.scss

@@ -3,8 +3,8 @@ main {
   gap: 1rem;
   padding: 0.6rem;
   border-radius: 8px;
-  background-color: #e0e0e0;
-
+  backdrop-filter: blur(40px);
+  background-color: rgba(255, 255, 255, 0.5);
   div {
     flex: 4;
     display: flex;
@@ -46,3 +46,29 @@ main {
     box-shadow: var(--button-box-shadow);
   }
 }
+.btn-filter {
+  display: none;
+}
+@media screen and (max-width: 400px) {
+  main {
+    padding: 0;
+  }
+}
+@media screen and (max-width: 650px) {
+  select {
+    display: none;
+  }
+  .btn-filter {
+    display: block;
+    flex: 1;
+    max-width: 3rem;
+    border-radius: 8px;
+    background-color: var(--color-white);
+    cursor: pointer;
+    border: none;
+    outline: none;
+    &:active {
+      transform: scale(0.9);
+    }
+  }
+}

src/app/components/searchbar/searchbar.component.ts

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-searchbar',
   standalone: true,
-  imports: [],
+  imports: [FaIconComponent],
   templateUrl: './searchbar.component.html',
   styleUrl: './searchbar.component.scss',
 })
-export class SearchbarComponent {}
+export class SearchbarComponent {
+  faFilter = faFilter;
+}