added cart link badge

frontend/components/global/Header.vue

@@ -3,6 +3,7 @@
 
 import useGetAccount from "~/composables/api/account/useGetAccount";
 import { useAuth } from "~/composables/api/auth/useAuth";
+import useGetOrdersCart from "~/composables/api/orders/useGetOrdersCart";
 import { NAV_LINKS } from "~/constants";
 
 // state
@@ -13,12 +14,17 @@ const isSideDrawerOpen = ref(false);
 
 // queries
 
-const { data: account } = useGetAccount();
+const { data: account, suspense: accountSuspense } = useGetAccount();
+
+accountSuspense();
+
+const { data: cart, suspense: cartSuspense } = useGetOrdersCart();
+
+cartSuspense();
 
 // computed
 
 const isHomePage = computed(() => route.path === "/");
-
 </script>
 
 <template>
@@ -31,10 +37,12 @@ const isHomePage = computed(() => route.path === "/");
             class="size-full flex items-center justify-between container h-[65px] lg:h-[85px] shrink-0 grow-0"
         >
             <button class="md:hidden" @click="isSideDrawerOpen = true">
-                <Icon name="humbleicons:bars" size="28"/>
+                <Icon name="humbleicons:bars" size="28" />
             </button>
             <div class="max-md:hidden flex items-center gap-8 lg:gap-16">
-                <div class="flex items-center justify-end gap-4 lg:gap-[1.5rem]">
+                <div
+                    class="flex items-center justify-end gap-4 lg:gap-[1.5rem]"
+                >
                     <Tooltip v-if="!!account && !!token" title="حساب کاربری">
                         <NuxtLink
                             :to="{ name: 'profile' }"
@@ -71,10 +79,19 @@ const isHomePage = computed(() => route.path === "/");
                     </Tooltip>
                     <Tooltip title="سبد خرید">
                         <NuxtLink to="/cart" class="flex-center">
-                            <Icon
-                                name="ci:cart"
-                                class="**:stroke-black size-5 lg:size-6"
-                            />
+                            <button class="relative">
+                                <Icon
+                                    name="ci:cart"
+                                    class="**:stroke-black size-5 lg:size-6"
+                                />
+
+                                <span
+                                    v-if="cart?.items.length! > 0"
+                                    class="size-4 shrink-0 absolute -bottom-2 -right-2 flex-center rounded-sm text-white bg-red-600 text-xs animate-pulse"
+                                >
+                                    {{ cart?.items.length }}
+                                </span>
+                            </button>
                         </NuxtLink>
                     </Tooltip>
                 </div>
@@ -112,6 +129,5 @@ const isHomePage = computed(() => route.path === "/");
         </div>
     </header>
 
-    <SideDrawer v-model="isSideDrawerOpen"/>
-
-</template>
+    <SideDrawer v-model="isSideDrawerOpen" />
+</template>