64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
|
|
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
|
|
import { Subject, filter, takeUntil } from "rxjs";
|
|
|
|
@Component({
|
|
selector: "app-header",
|
|
templateUrl: "./header.component.html",
|
|
styleUrls: ["./header.component.less"],
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
})
|
|
export class HeaderComponent implements AfterViewInit, OnDestroy {
|
|
@ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
|
|
menuOpened = false;
|
|
private destroy$ = new Subject<void>();
|
|
constructor(
|
|
private router: Router,
|
|
private route: ActivatedRoute,
|
|
) {
|
|
this.router.events
|
|
.pipe(filter((event) => event instanceof NavigationEnd))
|
|
.pipe(takeUntil(this.destroy$))
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
.subscribe((val: any) => {
|
|
if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
|
|
this.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 md:h-6 h-10 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.router.navigateByUrl(`/?search=${text}`);
|
|
}
|
|
}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
|
const search = params["search"];
|
|
if (search && this.searchInput) {
|
|
this.searchInput.nativeElement.value = search;
|
|
}
|
|
});
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.destroy$.next();
|
|
this.destroy$.complete();
|
|
}
|
|
}
|