65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
<div
|
|
[class]="
|
|
'header fixed flex justify-between w-full px-2 bg-gray-700 md:h-8 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base ' +
|
|
(menuOpened ? 'h-screen' : '')
|
|
"
|
|
>
|
|
<div class="flex justify-between flex-row w-full align-middle h-8 items-center">
|
|
<div class="flex flex-row gap-3 h-full items-center">
|
|
<a routerLink="/" class="h-full px-2 flex justify-center items-center justify-self-center"
|
|
><h1 class="text-white" title="Main page">NwaifuAnime</h1></a
|
|
>
|
|
<div class="border-l border-white h-full"></div>
|
|
<div class="flex-row gap-3 md:flex hidden h-full items-center">
|
|
<a
|
|
routerLink="/auth"
|
|
class="h-full px-2 flex justify-center items-center hover:bg-gray-600 transition ease-in-out delay-150 duration-300"
|
|
><h2 class="text-white" title="Auth page">Auth</h2></a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search bar on small screens -->
|
|
<button
|
|
type="button"
|
|
class="md:hidden flex justify-center items-center px-2"
|
|
(click)="changeMenu()"
|
|
>
|
|
<i [class]="menuBtnClass"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col md:flex-row md:justify-end justify-center items-center gap-3 md:w-[50vw] h-full w-full"
|
|
>
|
|
<!-- Search bar on big screens -->
|
|
<div [class]="searchBarClass">
|
|
<input
|
|
type="search"
|
|
#searchInput
|
|
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 border-0 flex flex-col items-center justify-center"
|
|
type="submit"
|
|
(click)="search()"
|
|
>
|
|
<span class="text-sm text-black h-full">Поиск</span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
[class]="
|
|
'flex flex-col w-full justify-start items-center md:hidden overflow-hidden ' +
|
|
(menuOpened ? 'h-auto' : 'h-0')
|
|
"
|
|
>
|
|
<a
|
|
routerLink="/auth"
|
|
class="h-full px-2 flex justify-center items-center hover:bg-gray-600 transition ease-in-out delay-150 duration-300"
|
|
><h2 class="text-white" title="Auth page">Auth</h2></a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|