added profile dropdown

frontend/components/global/Header.vue

@@ -3,50 +3,49 @@
 
 import useGetAccount from "~/composables/api/account/useGetAccount";
 import { useAuth } from "~/composables/api/auth/useAuth";
-
-// types
-
-type NavLink = {
-    title: string;
-    path: string;
-};
+import { useToast } from "~/composables/global/useToast";
+import { NAV_LINKS } from "~/constants";
 
 // state
 
-const { data: account } = useGetAccount();
 const route = useRoute();
-const { logout } = useAuth();
+const router = useRouter();
 
-const nav_links = ref<NavLink[]>([
+const { addToast } = useToast();
+const { logout, token } = useAuth();
+
+const profileDropdownItems = ref<DropdownItem[]>([
     {
-        title: "خانه",
-        path: "/",
+        title: "ورود به پنل کاربری",
+        icon: "ci:profile",
+        onClick: () => router.push({ name: "profile" }),
     },
     {
-        title: "محصولات",
-        path: "/products",
-    },
-    {
-        title: "دسته بندی ها",
-        path: "/category",
-    },
-    {
-        title: "ارتباط با ما",
-        path: "/contact-us",
-    },
-    {
-        title: "امکانات",
-        path: "#",
+        title: "خروج از حساب",
+        icon: "bi:arrow-bar-left",
+        itemClass: "!text-red-500",
+        iconClass: "**:stroke-red-500 **:fill-transparent",
+        onClick: () => {
+            logout();
+            nextTick(() => {
+                addToast({
+                    message: "با موفقیت از حساب خارج شدید",
+                    options: {
+                        status: "success",
+                    },
+                });
+            });
+        },
     },
 ]);
 
+// queries
+
+const { data: account } = useGetAccount();
+
 // computed
 
 const isHomePage = computed(() => route.path === "/");
-
-// lifecycle
-
-onMounted(() => {});
 </script>
 
 <template>
@@ -60,16 +59,28 @@ onMounted(() => {});
         >
             <div class="flex items-center gap-16">
                 <div class="flex items-center justify-end gap-[1.5rem]">
-                    <Tooltip v-if="!!account" title="حساب کاربری">
-                        <button
-                            @click="() => logout(true)"
-                            class="size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full bg-slate-300"
-                        >
-                            <Avatar
-                                :src="account.profile_photo"
-                                :alt="`${account.first_name} ${account.last_name}`"
-                            />
-                        </button>
+                    <Tooltip v-if="!!account && !!token" title="حساب کاربری">
+                        <Dropdown :items="profileDropdownItems">
+                            <template #trigger>
+                                <button
+                                    class="size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border border-black"
+                                >
+                                    <Avatar
+                                        :src="account.profile_photo"
+                                        :alt="
+                                            account.first_name &&
+                                            account.last_name
+                                                ? `${account.first_name.charAt(
+                                                      0
+                                                  )} ${account.last_name.charAt(
+                                                      0
+                                                  )}`
+                                                : ''
+                                        "
+                                    />
+                                </button>
+                            </template>
+                        </Dropdown>
                     </Tooltip>
                     <Tooltip v-else title="ورود">
                         <NuxtLink to="/signin" class="flex-center">
@@ -89,20 +100,22 @@ onMounted(() => {});
                             />
                         </NuxtLink>
                     </Tooltip>
-                    <NuxtLink to="/cart" class="flex-center">
-                        <Icon
-                            name="ci:cart"
-                            size="24px"
-                            class="**:stroke-black"
-                        />
-                    </NuxtLink>
+                    <Tooltip title="سبد خرید">
+                        <NuxtLink to="/cart" class="flex-center">
+                            <Icon
+                                name="ci:cart"
+                                size="24px"
+                                class="**:stroke-black"
+                            />
+                        </NuxtLink>
+                    </Tooltip>
                 </div>
 
                 <nav
                     class="flex-center gap-[2.5rem] typo-label-sm font-light text-black/80"
                 >
                     <NuxtLink
-                        v-for="(link, index) in nav_links"
+                        v-for="(link, index) in NAV_LINKS"
                         :key="index"
                         :to="link.path"
                     >