LeftMenus active support

frontend/src/components/LeftMenuBtn.vue

@@ -5,12 +5,13 @@ defineProps<{
   title: string;
   textStyle?: any;
   icon?: FunctionalComponent;
+  isActive?: boolean;
 }>();
 </script>
 
 <template>
-  <div class="btn">
-    <component v-if="icon" :is="icon"></component>
+  <div :class="{ btn: true, isActive: isActive }">
+    <component :is="icon" v-if="icon"></component>
     <a-typography-text class="text ml-6" :style="textStyle">
       {{ title }}
     </a-typography-text>
@@ -18,6 +19,10 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
+.isActive {
+  background-color: rgba(168, 168, 168, 0.143);
+  color: var(--color-blue-5) !important;
+}
 .btn {
   display: flex;
   text-align: center;
@@ -28,7 +33,7 @@ defineProps<{
   transition: all 0.6s;
 
   .text {
-    color: var(--color-gray-9) !important;
+    color: var(--color-gray-9);
   }
 
   &:hover {

frontend/src/components/LeftMenusPanel.vue

@@ -31,7 +31,11 @@ onMounted(() => {
   <div v-if="!isPhone" class="menu-body">
     <div class="left-menu">
       <div v-for="item in props.menus" :key="item.key" class="mb-6" @click="handleChangeMenu(item)">
-        <LeftMenuBtn :title="item.title" :icon="item.icon"> </LeftMenuBtn>
+        <LeftMenuBtn
+          :title="item.title"
+          :icon="item.icon"
+          :is-active="activeKey === item.key"
+        ></LeftMenuBtn>
       </div>
     </div>
     <div class="right-content" style="text-align: left">