resposived modile side drawer
This commit is contained in:
Mamalizz
@@ -20,6 +20,8 @@ defineProps<Props>();
|
||||
const { token } = useAuth();
|
||||
const { data: account } = useGetAccount();
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
// emit
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
@@ -29,13 +31,22 @@ const emit = defineEmits(["update:modelValue"]);
|
||||
const closeSideDrawer = () => {
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
|
||||
// watch
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
closeSideDrawer();
|
||||
}
|
||||
);
|
||||
</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"
|
||||
class="md:hidden fixed inset-0 min-h-svh z-1001 size-full bg-black/50 cursor-pointer"
|
||||
@click="closeSideDrawer"
|
||||
/>
|
||||
</Transition>
|
||||
@@ -43,61 +54,127 @@ const closeSideDrawer = () => {
|
||||
<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 duration-500 rounded-e-xl flex-col bg-white w-[300px] h-full gap-8 pt-12"
|
||||
class="md:hidden cursor-default flex top-0 right-0 fixed z-1002 transition-all duration-500 flex-col bg-white w-[300px] h-full px-4"
|
||||
>
|
||||
<div class="flex items-center flex-col justify-end gap-[1.5rem]">
|
||||
<Tooltip v-if="!!account && !!token" title="حساب کاربری">
|
||||
<NuxtLink
|
||||
:to="{ name: 'profile' }"
|
||||
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)}`
|
||||
: 'بدون نام کاربری'
|
||||
"
|
||||
/>
|
||||
</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 class="flex items-center flex-col justify-end gap-2 border-b border-slate-200 py-5">
|
||||
<NuxtLink
|
||||
v-if="!!account && !!token"
|
||||
:to="{ name: 'profile' }"
|
||||
class="w-full flex items-center justify-between gap-3 p-2 transition-all"
|
||||
active-class="bg-black rounded-md text-white **:stroke-white"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-5 flex-center">
|
||||
<Avatar
|
||||
class="!size-5"
|
||||
:src="account.profile_photo"
|
||||
:alt="
|
||||
account.first_name && account.last_name
|
||||
? `${account.first_name.charAt(0)} ${account.last_name.charAt(0)}`
|
||||
: 'بدون نام کاربری'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs"> {{ account.first_name }} {{ account.last_name }} </span>
|
||||
</div>
|
||||
<Icon
|
||||
name="bi:chevron-left"
|
||||
size="12"
|
||||
class="**:stroke-black/50 opacity-70"
|
||||
/>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
v-else
|
||||
to="/signin"
|
||||
class="w-full flex items-center justify-between gap-4 p-2 transition-all"
|
||||
active-class="bg-black rounded-md text-white **:stroke-white"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-5 flex-center">
|
||||
<Icon
|
||||
name="ci:profile"
|
||||
size="18"
|
||||
class="**:stroke-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="text-xs"> ورود به حساب </span>
|
||||
</div>
|
||||
<Icon
|
||||
name="bi:chevron-left"
|
||||
size="12"
|
||||
class="**:stroke-black/50 opacity-70"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<!--
|
||||
<NuxtLink
|
||||
to="/products"
|
||||
class="w-full flex items-center justify-between gap-4 p-2"
|
||||
active-class="bg-black rounded-md text-white **:stroke-white"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-5 flex-center">
|
||||
<Icon
|
||||
name="ci:search"
|
||||
size="18"
|
||||
class="**:stroke-black"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs"> جست و جو </span>
|
||||
</div>
|
||||
<Icon
|
||||
name="bi:chevron-left"
|
||||
size="12"
|
||||
class="**:stroke-black/50 opacity-70"
|
||||
/>
|
||||
</NuxtLink> -->
|
||||
<NuxtLink
|
||||
to="/cart"
|
||||
class="w-full flex items-center justify-between gap-4 p-2 transition-all"
|
||||
active-class="bg-black rounded-md text-white **:stroke-white"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-5 flex-center">
|
||||
<Icon
|
||||
name="ci:cart"
|
||||
size="19"
|
||||
class="**:stroke-black"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs"> سبد خرید </span>
|
||||
</div>
|
||||
<Icon
|
||||
name="bi:chevron-left"
|
||||
size="12"
|
||||
class="**:stroke-black/50 opacity-70"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
|
||||
>
|
||||
<nav class="flex-center flex-col gap-2 typo-label-sm font-light text-black/80 py-5">
|
||||
<NuxtLink
|
||||
v-for="(link, index) in NAV_LINKS"
|
||||
:key="index"
|
||||
:to="link.path"
|
||||
class="w-full flex items-center justify-between gap-3 p-2 transition-all"
|
||||
active-class="bg-black rounded-md text-white **:stroke-white"
|
||||
>
|
||||
{{ link.title }}
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-5 flex-center">
|
||||
<Icon
|
||||
:name="link.icon"
|
||||
size="18"
|
||||
class="**:stroke-black"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs"> {{ link.title }}</span>
|
||||
</div>
|
||||
<Icon
|
||||
name="bi:chevron-left"
|
||||
size="12"
|
||||
class="**:stroke-black/50 opacity-70"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user