From 9f50f424c8c0804d88501104676dfba027cdad52 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sun, 24 Nov 2024 13:47:32 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8Add=20click=20filter=20handling=20f?=
 =?UTF-8?q?or=20desktop=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/index.vue | 101 +++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index 4d736f4b0..adef4e0e3 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -6,7 +6,6 @@
         <div
           :class="[
             'flex',
-            'flex-row-reverse',
             'justify-between',
             'gap-[16px]',
             'items-center',
@@ -15,56 +14,6 @@
             'px-[16px] laptop:px-0',
           ]"
         >
-          <!-- Desktop Filter & Sorting -->
-          <div class="hidden desktop:flex items-center gap-[16px] relative">
-            <SearchBar
-              :search-query="searchQuery"
-              @open="handleSearchBarOpen"
-              @clear="handleSearchBarClear"
-              @input="handleSearchBarInput"
-            />
-
-            <ButtonV2
-              preset="tertiary"
-              :text="$t('listing_page_filter')"
-              class="whitespace-nowrap"
-            >
-              <template #prepend>
-                <IconFilter />
-              </template>
-            </ButtonV2>
-            <Dropdown>
-              <template #trigger="{ toggle }">
-                <ButtonV2
-                  preset="tertiary"
-                  class="whitespace-nowrap"
-                  :text="selectedSortingLabel"
-                  @click="toggle"
-                >
-                  <template #append>
-                    <IconArrowDown />
-                  </template>
-                </ButtonV2>
-              </template>
-              <MenuList class="!py-[8px]">
-                <MenuItem
-                  v-for="(item, i) in availableSorting"
-                  :key="i"
-                  label-align="left"
-                  label-class="!py-[8px]"
-                  :value="item.value"
-                  :label="item.text"
-                  :selected-value="selectedSorting"
-                  @select="handleSortingChange"
-                >
-                  <template v-if="selectedSorting === item.value" #label-append>
-                    <IconCheck />
-                  </template>
-                </MenuItem>
-              </MenuList>
-            </Dropdown>
-          </div>
-
           <nav class="relative flex items-center">
             <!-- Left arrow -->
             <div
@@ -121,6 +70,56 @@
               <IconArrowRight class="w-[20px] h-[20px]" />
             </div>
           </nav>
+          <!-- Desktop Filter & Sorting -->
+          <div class="hidden desktop:flex items-center gap-[16px] relative">
+            <SearchBar
+              :search-query="searchQuery"
+              @open="handleSearchBarOpen"
+              @clear="handleSearchBarClear"
+              @input="handleSearchBarInput"
+            />
+
+            <ButtonV2
+              preset="tertiary"
+              :text="$t('listing_page_filter')"
+              class="whitespace-nowrap"
+              @click="handleOpenFilterDialog"
+            >
+              <template #prepend>
+                <IconFilter />
+              </template>
+            </ButtonV2>
+            <Dropdown>
+              <template #trigger="{ toggle }">
+                <ButtonV2
+                  preset="tertiary"
+                  class="whitespace-nowrap"
+                  :text="selectedSortingLabel"
+                  @click="toggle"
+                >
+                  <template #append>
+                    <IconArrowDown />
+                  </template>
+                </ButtonV2>
+              </template>
+              <MenuList class="!py-[8px]">
+                <MenuItem
+                  v-for="(item, i) in availableSorting"
+                  :key="i"
+                  label-align="left"
+                  label-class="!py-[8px]"
+                  :value="item.value"
+                  :label="item.text"
+                  :selected-value="selectedSorting"
+                  @select="handleSortingChange"
+                >
+                  <template v-if="selectedSorting === item.value" #label-append>
+                    <IconCheck />
+                  </template>
+                </MenuItem>
+              </MenuList>
+            </Dropdown>
+          </div>
         </div>
 
         <!-- Mobile Filter & Sorting -->