feat: search field

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

@@ -6,6 +6,6 @@
     <h1>Update not available</h1>
   }
 }
-<app-header></app-header>
+<app-header (searchEvent)="onSearch($event)"></app-header>
 <div class="h-10"></div>
 <router-outlet></router-outlet>

apps/NwaifuAnime/src/app/app.component.ts

@@ -26,4 +26,8 @@ export class AppComponent {
   get serviceWorkerEnabled() {
     return this.sw.serviceWorkerEnabled;
   }
+
+  onSearch(text: string) {
+    console.log(text);
+  }
 }

apps/NwaifuAnime/src/app/app.routes.ts

@@ -1,4 +1,9 @@
 import { Route } from "@angular/router";
 import { HomeComponent } from "./components/home/home.component";
 
-export const appRoutes: Route[] = [{ path: "", component: HomeComponent }];
+export const appRoutes: Route[] = [
+  {
+    path: "",
+    component: HomeComponent,
+  },
+];

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"
 >
+  <div class="flex justify-between flex-row w-full align-middle">
     <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"
-  >
+    <!-- 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>

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

@@ -0,0 +1,3 @@
+.header {
+  transition: height 0.3s;
+}

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

@@ -1,9 +1,33 @@
-import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from "@angular/core";
 
 @Component({
   selector: "app-header",
   templateUrl: "./header.component.html",
   styleUrls: ["./header.component.less"],
   standalone: true,
+  imports: [CommonModule],
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  @Output() searchEvent: EventEmitter<string> = new EventEmitter();
+  @ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
+  menuOpened = false;
+  changeMenu() {
+    this.menuOpened = !this.menuOpened;
+  }
+
+  get menuBtnClass(): string {
+    return `lni ${this.menuOpened ? "lni-close" : "lni-menu"} text-white`;
+  }
+
+  get searchBarClass(): string {
+    return `search-bar bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 max-h-6 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
+  }
+
+  search() {
+    if (this.searchInput) {
+      const text = this.searchInput.nativeElement.value;
+      this.searchEvent.emit(text);
+    }
+  }
+}