feat: search field

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);
+    }
+  }
+}