63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
<header>
|
|
<nav
|
|
class="bg-gray-50 wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center shadow-lg shadow-gray-400/20"
|
|
>
|
|
<div class="">
|
|
<a class="px-3 py-1 bg-blue-600 text-white" routerLink="/">eKart</a>
|
|
</div>
|
|
|
|
<div class="flex-1 grid grid-cols-[1fr_auto]">
|
|
<input
|
|
class="w-full border border-gray-300 text-sm rounded-full rounded-r-none px-6 py-1"
|
|
placeholder="Search watches, brands, products..."
|
|
type="text"
|
|
/>
|
|
<button class="btn btn-ghost rounded-l-none! py-1 px-3 border-l-0!">
|
|
<lucide-angular [img]="SearchIcon" class="w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<div class="flex text-gray-600">
|
|
<button
|
|
class="btn btn-ghost py-1 px-3 rounded-r-none!"
|
|
popovertarget="popover-1"
|
|
style="anchor-name: --anchor-1"
|
|
>
|
|
<lucide-angular [img]="UserIcon" class="w-5" />
|
|
</button>
|
|
<button
|
|
class="btn btn-ghost py-1 px-3 rounded-l-none! border-l-0! relative"
|
|
popovertarget="popover-2"
|
|
style="anchor-name: --anchor-2"
|
|
>
|
|
<lucide-angular [img]="CartIcon" class="w-5" />
|
|
<span class="absolute top-0 text-xs ml-1">{{ cartItemCount | async }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<ul class="dropdown" id="popover-1" popover style="position-anchor: --anchor-1">
|
|
@if (authService.authState() === AuthState.Unauthenticated) {
|
|
<li><a class="block h-full w-full" routerLink="/login">Login</a></li>
|
|
} @else if (authService.authState() === AuthState.Loading) {
|
|
<li><a class="block h-full w-full">Loading</a></li>
|
|
} @else {
|
|
<li><a class="block h-full w-full" routerLink="/logout">Logout</a></li>
|
|
}
|
|
<li><a class="block h-full w-full" href="">My Account</a></li>
|
|
<li><a class="block h-full w-full" href="">Orders</a></li>
|
|
<li><a class="block h-full w-full" href="">Wishlist</a></li>
|
|
<li><a class="block h-full w-full" href="">Notifications</a></li>
|
|
</ul>
|
|
|
|
<app-cart
|
|
[cart]="(cartItems$ | async)!"
|
|
id="popover-2"
|
|
class="dropdown"
|
|
popover
|
|
style="position-anchor: --anchor-2"
|
|
/>
|
|
</header>
|