joydip.manna/ekart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature - add user menu in header

Browse Source
This commit is contained in:
kusowl 2026-02-19 16:52:38 +05:30
parent 4d5cb9791b
commit c42c64ae2d
2 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/core/layouts/header/header.html
View File

@ -19,7 +19,11 @@
<div class="flex space-x-4">
<div class="flex text-gray-600">
<button class="btn btn-ghost py-1 px-2 rounded-r-none!">
<button
popovertarget="popover-1"
style="anchor-name: --anchor-1"
class="btn btn-ghost py-1 px-2 rounded-r-none!"
>
<lucide-angular [img]="UserIcon" class="w-5" />
</button>
<button class="btn btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
@ -28,4 +32,11 @@
</div>
</div>
</nav>
<ul class="dropdown" popover id="popover-1" style="position-anchor: --anchor-1">
<li><a class="block h-full w-full" href="">Login</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>

9
src/styles.css
View File

@ -50,3 +50,12 @@ body {
.input {
@apply p-3 border border-gray-300 rounded-xl text-sm w-full;
}
.dropdown {
position-area: span-left bottom;
@apply p-4 mt-2 border border-gray-300 shadow-lg rounded-xl space-y-2 text-gray-800;
}
.dropdown li {
@apply rounded-lg hover:bg-linear-to-r hover:from-teal-300 hover:to-transparent px-5 py-1;
}