marzban-dev
112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import { NAV_LINKS } from "~/constants";
|
|
import { useAuth } from "~/composables/api/auth/useAuth";
|
|
import useGetAccount from "~/composables/api/account/useGetAccount";
|
|
|
|
// type
|
|
|
|
type Props = {
|
|
modelValue: boolean
|
|
}
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const { token } = useAuth();
|
|
const { data: account } = useGetAccount();
|
|
|
|
// emit
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
// method
|
|
|
|
const closeSideDrawer = () => {
|
|
emit("update:modelValue", false);
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="modelValue"
|
|
class="md:hidden fixed inset-0 h-svh z-999 size-full bg-black/50 cursor-pointer"
|
|
@click="closeSideDrawer"
|
|
/>
|
|
</Transition>
|
|
|
|
<div
|
|
@click.stop
|
|
:class="modelValue ? 'translate-x-0' : 'translate-x-[100%]'"
|
|
class="md:hidden cursor-default flex top-0 right-0 fixed z-999 transition-all flex-col bg-white w-[350px] h-full gap-8 pt-12"
|
|
>
|
|
<div class="flex items-center flex-col justify-end gap-[1.5rem]">
|
|
<Tooltip v-if="!!account && !!token" title="حساب کاربری">
|
|
<NuxtLink
|
|
:to="{ name: 'profile' }"
|
|
class="!size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border-[1.2px] border-black"
|
|
>
|
|
<Avatar
|
|
class="!size-[1.6rem]"
|
|
:src="account.profile_photo"
|
|
:alt="
|
|
account.first_name && account.last_name
|
|
? `${account.first_name.charAt(
|
|
0
|
|
)} ${account.last_name.charAt(0)}`
|
|
: 'بدون نام کاربری'
|
|
"
|
|
/>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
<Tooltip v-else title="ورود">
|
|
<NuxtLink to="/signin" class="flex-center">
|
|
<Icon
|
|
name="ci:profile"
|
|
size="24px"
|
|
class="**:stroke-black"
|
|
/>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
<Tooltip title="محصولات">
|
|
<NuxtLink to="/products" class="flex-center">
|
|
<Icon
|
|
name="ci:search"
|
|
size="21px"
|
|
class="**:stroke-black"
|
|
/>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
<Tooltip title="سبد خرید">
|
|
<NuxtLink to="/cart" class="flex-center">
|
|
<Icon
|
|
name="ci:cart"
|
|
size="24px"
|
|
class="**:stroke-black"
|
|
/>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
<nav
|
|
class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
|
|
>
|
|
<NuxtLink
|
|
v-for="(link, index) in NAV_LINKS"
|
|
:key="index"
|
|
:to="link.path"
|
|
>
|
|
{{ link.title }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</div>
|
|
|
|
</template> |