marzban-dev
142 lines
5.2 KiB
Vue
142 lines
5.2 KiB
Vue
<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="flex items-center justify-center"
|
|
>
|
|
<Avatar
|
|
class="!size-7"
|
|
: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>
|