Updated

frontend/components/global/Header.vue

@@ -32,7 +32,7 @@ const isHomePage = computed(() => route.path === "/");
         <div
             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">
+            <button class="md:hidden header-navbar-item" @click="isSideDrawerOpen = true">
                 <Icon name="humbleicons:bars" size="28" />
             </button>
             <div class="max-md:hidden flex items-center gap-8 lg:gap-16">
@@ -42,10 +42,10 @@ const isHomePage = computed(() => route.path === "/");
                     <Tooltip v-if="!!account && !!token" title="حساب کاربری">
                         <NuxtLink
                             :to="{ name: 'profile' }"
-                            class="!size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border-[1.2px] border-black"
+                            class="flex items-center justify-center"
                         >
                             <Avatar
-                                class="!size-[1.6rem]"
+                                class="!size-7"
                                 :src="account.profile_photo"
                                 :alt="
                                     account.first_name && account.last_name
@@ -58,7 +58,7 @@ const isHomePage = computed(() => route.path === "/");
                         </NuxtLink>
                     </Tooltip>
                     <Tooltip v-else title="ورود">
-                        <NuxtLink to="/signin" class="flex-center">
+                        <NuxtLink to="/signin" class="flex-center header-navbar-item">
                             <Icon
                                 name="ci:profile"
                                 class="**:stroke-black size-5 lg:size-6"
@@ -66,7 +66,7 @@ const isHomePage = computed(() => route.path === "/");
                         </NuxtLink>
                     </Tooltip>
                     <Tooltip title="محصولات">
-                        <NuxtLink to="/products" class="flex-center">
+                        <NuxtLink to="/products" class="flex-center header-navbar-item">
                             <Icon
                                 name="ci:search"
                                 class="**:stroke-black size-4.5 lg:size-[21px]"
@@ -78,22 +78,20 @@ const isHomePage = computed(() => route.path === "/");
                             <button class="relative">
                                 <Icon
                                     name="ci:cart"
-                                    class="**:stroke-black size-5 lg:size-6"
+                                    class="**:stroke-black size-5 lg:size-6 header-navbar-item"
                                 />
 
-                                <span
+                                <div
                                     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>
+                                    class="size-2 shrink-0 absolute -bottom-1.5 -right-1.5 rounded-full bg-red-600 after:size-[125%] after:absolute after:bg-red-600 flex-center after:rounded-full after:animate-ping"
+                                />
                             </button>
                         </NuxtLink>
                     </Tooltip>
                 </div>
 
                 <nav
-                    class="flex-center gap-6 lg:gap-[2.5rem] typo-label-xs lg:typo-label-sm font-light text-black/80"
+                    class="flex-center gap-6 lg:gap-[2.5rem] typo-label-xs lg:typo-label-sm font-light text-black/80 header-navbar-item"
                 >
                     <NuxtLink
                         v-for="(link, index) in NAV_LINKS"
@@ -105,10 +103,10 @@ const isHomePage = computed(() => route.path === "/");
                 </nav>
             </div>
 
-            <div>
+            <div class="header-navbar-item">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 lg:h-6"
+                    class="h-5 lg:h-6 "
                     fill="none"
                     viewBox="0 0 220 40"
                 >