From 04d844a8ca6f2efc15e7b8d86cfe89f53fef1e0d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 2 Feb 2024 12:09:33 +0800
Subject: [PATCH] feat: add activated style for dock and settings item icons

---
 src/components/Dock/Dock.vue         |  9 ++++++++-
 src/components/Settings/Settings.vue | 10 +++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 0c8901f5..a3710855 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -202,7 +202,14 @@ function toggleDockHide(hide: boolean) {
               :class="{ active: activatedPage === dockItemVisibility.page }"
               @click="emit('change-page', dockItemVisibility.page)"
             >
-              <Icon :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.icon as string" />
+              <Icon
+                v-show="activatedPage !== dockItemVisibility.page"
+                :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.icon as string"
+              />
+              <Icon
+                v-show="activatedPage === dockItemVisibility.page"
+                :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.iconActivated as string"
+              />
             </button>
           </Tooltip>
         </template>
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 78c347fd..5f0b7fbe 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -139,19 +139,15 @@ function setCurrentTitle() {
               @click="changeMenuItem(menuItem.value)"
             >
               <Icon
+                v-show="menuItem.value !== activatedMenuItem"
                 text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
                 :icon="menuItem.icon"
               />
-              <!-- <Icon
-                v-if="menuItem.value === activatedMenuItem"
+              <Icon
+                v-show="menuItem.value === activatedMenuItem"
                 text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
                 :icon="menuItem.iconActivated"
               />
-              <Icon
-                v-else
-                text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
-                :icon="menuItem.icon"
-              /> -->
               <span shrink-0>{{ menuItem.title }}</span>
             </a>
           </li>