From 7e5f30d0496dad2fafd61b2604e62f6d49658f63 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Mon, 21 Apr 2025 23:30:33 +0330
Subject: [PATCH] resposived modile side drawer

---
 frontend/components/global/SideDrawer.vue | 173 ++++++++++++++++------
 1 file changed, 125 insertions(+), 48 deletions(-)

diff --git a/frontend/components/global/SideDrawer.vue b/frontend/components/global/SideDrawer.vue
index bd434ff..9bb0fae 100644
--- a/frontend/components/global/SideDrawer.vue
+++ b/frontend/components/global/SideDrawer.vue
@@ -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>