Add mobile drawer new icons

frontend/components/global/SideDrawer.vue

@@ -38,7 +38,7 @@ watch(
     () => route.fullPath,
     () => {
         closeSideDrawer();
-    }
+    },
 );
 </script>
 
@@ -88,14 +88,17 @@ watch(
                 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"
+                active-class="bg-black rounded-md text-white"
             >
                 <div class="flex items-center gap-3">
-                    <div class="size-5 flex-center">
-                        <Icon
+                    <div class="size-6 flex-center">
+                        <!-- <Icon
                             name="ci:profile"
                             size="18"
                             class="**:stroke-black"
+                        /> -->
+                        <NuxtImg
+                            src="/img/mobile-drawer/profile.gif"
                         />
                     </div>
 
@@ -132,14 +135,12 @@ watch(
             <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"
+                active-class="bg-black rounded-md text-white"
             >
                 <div class="flex items-center gap-3">
-                    <div class="size-5 flex-center">
-                        <Icon
-                            name="ci:cart"
-                            size="19"
-                            class="**:stroke-black"
+                    <div class="size-6 flex-center">
+                        <NuxtImg
+                            src="/img/mobile-drawer/cart.gif"
                         />
                     </div>
                     <span class="text-xs"> سبد خرید </span>
@@ -158,14 +159,18 @@ watch(
                 :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"
+                active-class="bg-black rounded-md text-white [&_.drawer-item-icon]:invert"
             >
                 <div class="flex items-center gap-3">
-                    <div class="size-5 flex-center">
-                        <Icon
+                    <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>

frontend/constants/index.ts

@@ -109,22 +109,22 @@ export const NAV_LINKS = [
     {
         title: "خانه",
         path: "/",
-        icon: "ci:home",
+        icon: "/img/mobile-drawer/home.gif",
     },
     {
         title: "محصولات",
         path: "/products",
-        icon: "ci:airdrop",
+        icon: "/img/mobile-drawer/products.gif",
     },
     {
         title: "دسته بندی ها",
         path: "/category",
-        icon: "ci:delivery-boxes",
+        icon: "/img/mobile-drawer/category.gif",
     },
     {
         title: "ارتباط با ما",
         path: "/contact-us",
-        icon: "ci:call",
+        icon: "/img/mobile-drawer/contact.gif",
     },
 ];