feat: auto-hide search

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

@@ -13,7 +13,7 @@
           <button
             (click)="goToReader(chapter.number, chapter.volume)"
             [title]="chapter.name"
-            class="p-3 text-white bg-slate-600 w-[400px] mt-3 rounded-lg"
+            class="p-3 text-white bg-slate-600 w-[300px] mt-3 rounded-lg"
           >
             <h3>
               <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
@@ -22,7 +22,7 @@
         }
       </div>
     </details>
-    <button class="p-3 text-white bg-slate-600 w-[400px] mt-5 rounded-lg" (click)="goToReader()">
+    <button class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg" (click)="goToReader()">
       Читать
     </button>
   }

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

@@ -17,7 +17,11 @@
       class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
       (keydown.enter)="search()"
     />
-    <button class="align-middle w-[100px] text-center" type="submit" (click)="search()">
+    <button
+      class="align-middle w-[100px] text-center border-0 flex flex-col items-center justify-center"
+      type="submit"
+      (click)="search()"
+    >
       <span class="text-sm text-black h-full">Поиск</span>
     </button>
   </div>

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

@@ -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() {

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

@@ -1,8 +1,8 @@
 <h1>It's home component</h1>
-<div class="flex flex-col items-center">
+<div class="flex flex-col items-center w-full px-3">
   @for (item of items; track $index) {
-    <button (click)="getDetails(item.slug_url)" title="{{ item.name }}" class="mb-6">
-      <div class="card flex flex-col items-center border-black border-2 rounded-md p-4">
+    <button (click)="getDetails(item.slug_url)" title="{{ item.name }}" class="mb-6 w-full">
+      <div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
         <h1>{{ item.rus_name }}</h1>
         <img [src]="item.cover.thumbnail" [alt]="item.slug" class="w-[200px] h-auto aspect-auto" />
       </div>

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

@@ -39,7 +39,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   ngAfterViewInit(): void {
     this.route.queryParams.subscribe((params) => {
       const search = params["search"];
-      console.log(params);
       if (search) {
         this.searchService.search(search);
       }