Update categories arrows

frontend/components/home/Categories.vue

@@ -9,9 +9,13 @@ import { EffectCoverflow } from "swiper/modules";
 // state
 
 const { data: homeData } = useHomeData();
+
 const swiper_instance = ref<SwiperClass | null>(null);
 const activeIndex = ref(0);
 
+const slideElement = ref<HTMLDivElement | null>(null);
+const { width: slideWidth } = useElementSize(slideElement);
+
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
@@ -67,6 +71,7 @@ const onSlideChange = (swiper: SwiperClass) => {
                 }"
             >
                 <SwiperSlide
+                    ref="slideElement"
                     v-for="(slide, index) in homeData!.sub_categories"
                     :key="slide.id"
                 >
@@ -85,7 +90,10 @@ const onSlideChange = (swiper: SwiperClass) => {
             <div
                 v-if="!swiper_instance?.isBeginning"
                 @click="swiper_instance?.slidePrev()"
-                class="max-xs:hidden absolute z-20 right-10 xs:right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                :style="{
+                    right: `calc(50% - ${slideWidth / 2}px - 20px)`,
+                }"
+                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-right"
@@ -96,7 +104,10 @@ const onSlideChange = (swiper: SwiperClass) => {
             <div
                 v-if="!swiper_instance?.isEnd"
                 @click="swiper_instance?.slideNext()"
-                class="max-xs:hidden absolute z-20 left-10 xs:left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                :style="{
+                    left: `calc(50% - ${slideWidth / 2}px - 20px)`,
+                }"
+                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-left"
@@ -112,6 +123,7 @@ const onSlideChange = (swiper: SwiperClass) => {
                     class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
                     end-icon="ci:arrow-left"
                 >
+                    {{ slideWidth }}
                     مشاهده همه دسته ها
                 </Button>
             </NuxtLink>