hossein-por-shop/frontend/components/global/SideDrawer.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

defineProps<Props>();

// state

const { token } = useAuth();
const { data: account } = useGetAccount();

const route = useRoute();

// emit

const emit = defineEmits(["update:modelValue"]);

// method

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 min-h-svh z-1001 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-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-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="ci: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"
            >
                <div class="flex items-center gap-3">
                    <div class="size-6 flex-center">
                        <!-- <Icon
                            name="ci:profile"
                            size="18"
                            class="**:stroke-black"
                        /> -->
                        <NuxtImg
                            src="/img/mobile-drawer/profile.gif"
                        />
                    </div>

                    <span class="text-xs"> ورود به حساب </span>
                </div>
                <Icon
                    name="ci: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="ci: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"
            >
                <div class="flex items-center gap-3">
                    <div class="size-6 flex-center">
                        <NuxtImg
                            src="/img/mobile-drawer/cart.gif"
                        />
                    </div>
                    <span class="text-xs"> سبد خرید </span>
                </div>
                <Icon
                    name="ci:bi-chevron-left"
                    size="12"
                    class="**:stroke-black/50 opacity-70"
                />
            </NuxtLink>
        </div>

        <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 [&_.drawer-item-icon]:invert"
            >
                <div class="flex items-center gap-3">
                    <div class="size-6 flex-center">
                        <!-- <Icon
                            :name="link.icon"
                            size="18"
                            class="**:stroke-black"
                        /> -->
                        <NuxtImg
                            :src="link.icon"
                            class="drawer-item-icon"
                        />
                    </div>
                    <span class="text-xs"> {{ link.title }}</span>
                </div>
                <Icon
                    name="ci:bi-chevron-left"
                    size="12"
                    class="**:stroke-black/50 opacity-70"
                />
            </NuxtLink>
        </nav>
    </div>
</template>