PMCORE-3351:Case list settings is not highlighted when the mouse is over that icon

SQL translation

resources/assets/js/components/menu/CustomSidebarMenuItem.vue

@@ -43,11 +43,22 @@
                                 :data="item"
                                 ref="tooltip"
                             ></custom-tooltip>
-                            <b-icon
-                                v-if="item.sortable"
-                                :icon="item.sortIcon"
-                                @click="onClickSortSettings"
-                            ></b-icon>
+                            <span v-if="item.sortable">
+                                <b-icon
+                                    :id="`gear-${item.id}`"
+                                    :icon="item.sortIcon"
+                                    @click="onClickSortSettings"
+                                    @mouseover="hoverHandler"
+                                    @mouseleave="unhoverHandler"
+                                    v-bind:style="{color: sortColor}"
+                                ></b-icon>
+                                <b-tooltip
+                                    :target="`gear-${item.id}`"
+                                    triggers="hover"
+                                >
+                                    {{ $t("ID_CASES_LIST_SETTINGS") }}
+                                </b-tooltip>
+                            </span>
                         </span>
                     </template>
                 </transition>
@@ -233,6 +244,7 @@ export default {
                 CASES_PAUSED: "paused",
                 CASES_SELFSERVICE: "unassigned"
             },
+            sortColor: "white",
         };
     },
     mounted() {
@@ -563,6 +575,12 @@ export default {
             event.stopPropagation();
             this.$refs["modal"].show();
         },
+        hoverHandler() {
+            this.sortColor = '#02feff';
+        },
+        unhoverHandler() {
+            this.sortColor = 'white';
+        }
     },
     inject: ["emitActiveShow", "emitItemClick", "emitItemUpdate"],
 };