marzban-dev
162 lines
5.1 KiB
Vue
162 lines
5.1 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetAccount from "~/composables/api/account/useGetAccount";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
isShow: boolean;
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
|
|
const profileLinks = ref([
|
|
{
|
|
icon: "bi:person-vcard",
|
|
title: "پروفایل",
|
|
path: { name: "profile" },
|
|
},
|
|
{
|
|
icon: "bi:map",
|
|
title: "آدرس ها",
|
|
path: { name: "profile-addresses" },
|
|
},
|
|
{
|
|
icon: "bi:cart",
|
|
title: "خرید ها و سفارش ها",
|
|
path: { name: "profile-purchases-and-orders" },
|
|
matchPattern: /^profile-purchases-and-orders/,
|
|
},
|
|
{
|
|
icon: "bi:bookmark",
|
|
title: "علاقهمندی ها",
|
|
path: { name: "profile-saved-products" },
|
|
matchPattern: /^profile-saved-products/,
|
|
},
|
|
{
|
|
icon: "bi:ticket",
|
|
title: "تیکت ها",
|
|
path: { name: "profile-tickets" },
|
|
matchPattern: /^profile-ticket/,
|
|
},
|
|
{
|
|
icon: "bi:bell",
|
|
title: "اعلانات",
|
|
path: { name: "profile-notifications" },
|
|
},
|
|
]);
|
|
|
|
// queries
|
|
|
|
const { data: account, suspense } = useGetAccount();
|
|
|
|
await suspense();
|
|
|
|
// methods
|
|
|
|
const isLinkActive = (link: any) => {
|
|
if (link.matchPattern) {
|
|
return link.matchPattern.test(route.name);
|
|
} else {
|
|
return route.name === link.path.name;
|
|
}
|
|
};
|
|
|
|
// inject
|
|
|
|
const toggleSidebar = inject("toggleSidebar");
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="max-lg:absolute max-lg:inset-0 w-full max-lg:bg-white lg:w-3/12 flex flex-col gap-4 z-[99] max-lg:container transition-all duration-[400ms] max-lg:h-[calc(100svh-65px)]"
|
|
:class="!isShow ? 'max-lg:translate-x-full' : 'translate-x-0'"
|
|
>
|
|
<div class="w-full rounded-xl bg-slate-50 border border-slate-200 p-4">
|
|
<div class="flex items-center justify-between w-full">
|
|
<div class="flex flex-col items-start gap-1">
|
|
<span class="flex font-semibold text-dynamic-primary">
|
|
<p v-if="account?.first_name">
|
|
{{ `${account?.first_name} ${account?.last_name}` }}
|
|
</p>
|
|
<p v-else>بدون نام کاربری</p>
|
|
</span>
|
|
<NuxtLink
|
|
:to="{ name: 'profile' }"
|
|
class="text-xs font-semibold text-cyan-500"
|
|
@click="toggleSidebar"
|
|
>
|
|
ویرایش اطلاعات
|
|
</NuxtLink>
|
|
</div>
|
|
<Avatar
|
|
class="!size-12"
|
|
:src="account!.profile_photo"
|
|
:alt="
|
|
account?.first_name && account?.last_name
|
|
? `${account?.first_name.charAt(0)} ${account?.last_name.charAt(0)}`
|
|
: 'بدون نام کاربری'
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col gap-2 rounded-xl bg-slate-50 border border-slate-200 p-4">
|
|
<NuxtLink
|
|
v-for="(link, index) in profileLinks"
|
|
:key="index"
|
|
:to="{ ...link.path }"
|
|
:class="
|
|
isLinkActive(link) ? 'bg-black text-slate-100 **:fill-slate-100' : '**:fill-black hover:bg-gray-200'
|
|
"
|
|
class="flex items-center justify-between transition-all rounded-lg py-3.5 lg:py-4 px-3"
|
|
@click="toggleSidebar"
|
|
>
|
|
<span class="flex-center gap-3">
|
|
<div class="size-5 flex-center">
|
|
<Icon :name="link.icon" />
|
|
</div>
|
|
<span class="text-xs lg:text-sm">{{ link.title }}</span>
|
|
</span>
|
|
|
|
<Icon
|
|
name="bi:chevron-left"
|
|
class="transition-all"
|
|
/>
|
|
</NuxtLink>
|
|
|
|
<LogoutModal>
|
|
<template #trigger>
|
|
<button
|
|
class="w-full flex items-center cursor-pointer justify-between transition-all rounded-lg py-4 px-3 hover:bg-danger-100 text-danger-500 **:fill-danger-100"
|
|
>
|
|
<span class="flex-center gap-3">
|
|
<div class="size-5 flex-center">
|
|
<Icon
|
|
name="bi:arrow-bar-right"
|
|
class="**:fill-danger-500"
|
|
/>
|
|
</div>
|
|
<span class="text-xs lg:text-sm"> خروج از حساب </span>
|
|
</span>
|
|
|
|
<Icon
|
|
name="bi:chevron-left"
|
|
class="transition-all **:fill-danger-500"
|
|
/>
|
|
</button>
|
|
</template>
|
|
</LogoutModal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|