feat: search field

apps/NwaifuAnime/src/app/components/header/header.component.html

@@ -1,17 +1,23 @@
 <div
-  class="fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col"
+  class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col md:gap-0 gap-3"
 >
-  <h1 class="text-white">NwaifuAnime</h1>
-  <div
-    id="search-bar"
-    class="bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 max-h-6 flex justify-start flex-row items-center gap-1 rounded-md"
-  >
+  <div class="flex justify-between flex-row w-full align-middle">
+    <h1 class="text-white">NwaifuAnime</h1>
+    <!-- Search bar on small screens -->
+    <button type="button" class="md:hidden" (click)="changeMenu()">
+      <i [class]="menuBtnClass"></i>
+    </button>
+  </div>
+
+  <!-- Search bar on big screens -->
+  <div [class]="searchBarClass">
     <input
       type="search"
-      class="outline-none ps-1 text-sm leading-6 w-[70%] border-0 bg-transparent border-r border-gray-700"
+      #searchInput
+      class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
     />
-    <button class="align-middle w-[30%] text-center" type="submit">
-      <span class="text-sm text-white">Поиск <i class="lni lni-search-alt"></i></span>
+    <button class="align-middle w-[100px] text-center" type="submit" (click)="search()">
+      <span class="text-sm text-black h-full">Поиск</span>
     </button>
   </div>
 </div>