From 23ac5df567507aeb3d0803b0f55e7a194b6ea6a6 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 24 Nov 2024 20:42:06 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Handle=20tags=20scroll=20bar=20f?=
 =?UTF-8?q?or=20phone=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/index.vue | 67 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index adef4e0e3..f15840804 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -18,11 +18,40 @@
             <!-- Left arrow -->
             <div
               v-if="isOverflowing && !isAtStart"
-              class="absolute left-0 h-full z-10 flex items-center pr-[120px] text-gray-500 bg-gradient-to-l from-transparent to-light-gray cursor-pointer"
+              :class="[
+                'hidden laptop:flex',
+                'absolute',
+                'left-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pr-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-l',
+                'from-transparent',
+                'to-light-gray',
+                'cursor-pointer',
+              ]"
               @click="scrollLeft"
             >
               <IconArrowLeft class="w-[20px] h-[20px]" />
             </div>
+            <div
+              v-if="isOverflowing && !isAtStart"
+              :class="[
+                'flex laptop:hidden',
+                'absolute',
+                'left-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pr-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-l',
+                'from-transparent',
+                'to-light-gray',
+              ]"
+            />
             <!-- Tags -->
             <div
               ref="tagsContainer"
@@ -33,7 +62,10 @@
                 'w-full',
                 'px-[16px] laptop:px-0',
                 'py-[16px]',
-                'overflow-x-hidden',
+                'overflow-scroll',
+                'scrollbar-custom',
+
+                'laptop:overflow-x-hidden',
                 'overflow-y-hidden',
               ]"
               @scroll="handleScroll"
@@ -64,11 +96,40 @@
             <!-- Right arrow -->
             <div
               v-if="isOverflowing && !isAtEnd"
-              class="absolute right-0 h-full z-10 flex items-center pl-[120px] text-gray-500 bg-gradient-to-r from-transparent to-light-gray cursor-pointer"
+              :class="[
+                'hidden laptop:flex',
+                'absolute',
+                'right-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pl-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-r',
+                'from-transparent',
+                'to-light-gray',
+                'cursor-pointer',
+              ]"
               @click="scrollRight"
             >
               <IconArrowRight class="w-[20px] h-[20px]" />
             </div>
+            <div
+              v-if="isOverflowing && !isAtEnd"
+              :class="[
+                'flex laptop:hidden',
+                'absolute',
+                'right-0',
+                'h-full',
+                'z-10',
+                'items-center',
+                'pl-[120px]',
+                'text-gray-500',
+                'bg-gradient-to-r',
+                'from-transparent',
+                'to-light-gray',
+              ]"
+            />
           </nav>
           <!-- Desktop Filter & Sorting -->
           <div class="hidden desktop:flex items-center gap-[16px] relative">