fix menu

src/routes/+page.svelte

@@ -3,18 +3,56 @@
   import Button from "@/components/ui/button/button.svelte";
   import Logo from "@/components/ui/logo/logo.svelte";
   import * as Avatar from "@/components/ui/avatar";
+  import * as DropdownMenu from "@/components/ui/dropdown-menu";
   import Progressbar from "@/components/ui/progressbar/progressbar.svelte";
+  import Settings from "lucide-svelte/icons/settings";
+  import LogOut from "lucide-svelte/icons/log-out";
+  import Heart from "lucide-svelte/icons/heart";
+  import { badgeVariants } from "@/components/ui/badge";
+  import { twMerge } from "tailwind-merge";
   let progress = $state(0);
   let extended = $state(false);
 </script>
 
 <div class="relative h-screen w-screen">
   <Background />
-  <div class="absolute top-2 right-2 py-7">
-    <Avatar.Root>
-      <Avatar.AvatarFallback>U</Avatar.AvatarFallback>
-      <Avatar.AvatarImage src="https://a.ez-pp.farm/1001"></Avatar.AvatarImage>
-    </Avatar.Root>
+  <div class="absolute z-20 top-2 right-2 py-7">
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <div class="relative">
+          <p
+            class={twMerge(
+              badgeVariants(),
+              "p-0 h-5 w-5 absolute -right-0.5 -top-0.5 z-50 !bg-pink-600 border-2 border-pink-800 text-white"
+            )}
+          >
+            <Heart class="h-3 w-3 m-auto p-0" />
+          </p>
+          <Avatar.Root class="border-[3px] z-40">
+            <Avatar.AvatarFallback>U</Avatar.AvatarFallback>
+            <Avatar.AvatarImage src="https://a.ez-pp.farm/1001"
+            ></Avatar.AvatarImage>
+          </Avatar.Root>
+        </div>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content class="w-48 max-w-48 mx-2" side="bottom">
+        <DropdownMenu.Group>
+          <DropdownMenu.GroupHeading class="truncate">Hello, Quetzalcoatl!</DropdownMenu.GroupHeading>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Group>
+            <DropdownMenu.Item class="cursor-pointer">
+              <Settings class="mr-2 size-4" />
+              <span>Settings</span>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item class="cursor-pointer">
+            <LogOut class="mr-2 size-4" />
+            <span>Log out</span>
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   </div>
 
   <div