4a4c8bd4e3
added s authState which helps conditonaly render components based on this state stored user details in localStoarge so that server side end point does not get hit in every page load. add a guard which protects routes and redirects to login if user is not logged in. create a logout route
49 lines
1.8 KiB
HTML
49 lines
1.8 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-gray-800 text-white" href="/">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-2 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-2 rounded-l-none! border-l-0!">
|
|
<lucide-angular [img]="CartIcon" class="w-5" />
|
|
</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>
|
|
</header>
|