From 3c8e6e2548be9ee7dfb87c10b9e11cd935550ff5 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 6 Feb 2025 22:57:02 +0330
Subject: [PATCH] added user dropdown component

---
 frontend/components/global/UserDropdown.vue | 140 ++++++++++++++++++++
 1 file changed, 140 insertions(+)
 create mode 100644 frontend/components/global/UserDropdown.vue

diff --git a/frontend/components/global/UserDropdown.vue b/frontend/components/global/UserDropdown.vue
new file mode 100644
index 0000000..becd81e
--- /dev/null
+++ b/frontend/components/global/UserDropdown.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+// imports
+
+import useGetAccount from "~/composables/api/account/useGetAccount";
+import { useAuth } from "~/composables/api/auth/useAuth";
+import { useToast } from "~/composables/global/useToast";
+
+// state
+
+const { logout } = useAuth();
+const { addToast } = useToast();
+const router = useRouter();
+
+const profileDropdownItems = ref<DropdownItem[]>([
+    {
+        title: "خرید ها و سفارش ها",
+        icon: "ci:cart",
+        onClick: () => router.push({ name: "profile-purchases-and-orders" }),
+    },
+    {
+        title: "پشتیبانی",
+        icon: "ci:headphones",
+        onClick: () => router.push({ name: "profile-ticket" }),
+    },
+    {
+        title: "خروج از حساب",
+        icon: "bi:arrow-bar-left",
+        itemClass: "!text-red-500",
+        iconClass: "**:stroke-red-500 **:fill-transparent",
+        onClick: () => {
+            logout();
+            nextTick(() => {
+                addToast({
+                    message: "با موفقیت از حساب خارج شدید",
+                    options: {
+                        status: "success",
+                    },
+                });
+            });
+        },
+    },
+]);
+
+// queries
+
+const { data: account } = useGetAccount();
+</script>
+
+<template>
+    <Dropdown>
+        <template #trigger>
+            <button
+                v-if="!!account"
+                class="size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border border-black"
+            >
+                <Avatar
+                    :src="account.profile_photo"
+                    :alt="
+                        account.first_name && account.last_name
+                            ? `${account.first_name.charAt(
+                                  0
+                              )} ${account.last_name.charAt(0)}`
+                            : ''
+                    "
+                />
+            </button>
+        </template>
+
+        <template #content>
+            <DropdownMenuContent
+                class="min-w-[220px] w-full outline-none bg-gray-50 border border-gray-400 rounded-2xl font-iran-yekan-x shadow-2xl will-change-[opacity,transform] data-[side=top]:animate-slide-up-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-down-fade data-[side=left]:animate-slide-right-fade z-10000"
+                :side-offset="5"
+            >
+                <div
+                    class="w-full flex items-center justify-between gap-2 px-2 border-b border-gray-400"
+                >
+                    <div
+                        v-if="!!account"
+                        class="flex items-center justify-start py-2"
+                    >
+                        <Avatar
+                            :src="account.profile_photo"
+                            class="!size-8"
+                            :alt="
+                                account.first_name && account.last_name
+                                    ? `${account.first_name.charAt(
+                                          0
+                                      )} ${account.last_name.charAt(0)}`
+                                    : 'بدون نام کاربری'
+                            "
+                        />
+                        <span class="typo-label-xs text-black">{{
+                            `${account.first_name} ${account.last_name}`
+                        }}</span>
+                    </div>
+                    <NuxtLink
+                        :to="{ name: 'profile' }"
+                        class="aspect-square rounded-sm size-7 flex-center"
+                    >
+                        <Icon
+                            name="bi:pencil"
+                            class="**:fill-black"
+                            size="14"
+                        />
+                    </NuxtLink>
+                </div>
+
+                <div class="flex-col flex p-2">
+                    <DropdownMenuItem
+                        v-for="(item, index) in profileDropdownItems"
+                        :key="index"
+                        @click="item.onClick"
+                        :class="
+                            item.itemClass
+                                ? item.itemClass
+                                : 'hover:!text-black'
+                        "
+                        class="group text-xs leading-none text-black hover:!bg-gray-200 cursor-pointer border-none rounded-md flex items-center justify-start py-1 relative select-none outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-black data-[highlighted]:text-white"
+                    >
+                        <div class="size-8 flex-center">
+                            <Icon
+                                :name="item.icon"
+                                :class="item.iconClass"
+                                size="16"
+                                class="**:stroke-black"
+                            />
+                        </div>
+                        <span>
+                            {{ item.title }}
+                        </span>
+                    </DropdownMenuItem>
+                </div>
+
+                <DropdownMenuArrow class="fill-gray-50 stroke-gray-400" />
+            </DropdownMenuContent>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>