feat: auto-hide search
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
|
||||
import { filter } from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: "app-header",
|
||||
@@ -15,7 +16,16 @@ export class HeaderComponent implements AfterViewInit {
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
) {}
|
||||
) {
|
||||
this.router.events
|
||||
.pipe(filter((event) => event instanceof NavigationEnd))
|
||||
// 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;
|
||||
}
|
||||
@@ -25,7 +35,7 @@ export class HeaderComponent implements AfterViewInit {
|
||||
}
|
||||
|
||||
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"}`;
|
||||
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() {
|
||||
|
||||
Reference in New Issue
Block a user