From 28edf33aff8fa2e00507257cd7198f97e772ce37 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 4 Mar 2024 21:31:50 +0700
Subject: [PATCH] Add hover styles for primary background color and text color

---
 src/assets/css/style.css           | 10 ++++
 src/components/CommandPalettes.vue | 82 +++++++++++++++---------------
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index b05fcac..7f1e238 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -4345,6 +4345,11 @@ body {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-10:hover {
   --tw-bg-opacity: 0.1;
 }
@@ -4374,6 +4379,11 @@ body {
   color: rgb(2 73 90 / var(--tw-text-opacity));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .hover\:opacity-80:hover {
   opacity: 0.8;
 }
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index 2509e26..bf3912b 100755
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -80,48 +80,50 @@
                                     <ul class="text-sm text-gray-700">
                                         <ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
                                             :key="menu.path" v-slot="{ active }">
-                                            <li @click="command.openMenu(menu)"
-                                                :class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-primary-500 text-white']">
-                                                <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
-                                                    alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else-if="menu.path.includes('/keluhan/')"
-                                                    :is="navigationIcon[1]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else-if="menu.path.includes('/monalisa/')"
-                                                    :is="navigationIcon[2]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else-if="menu.path.includes('/check-in-out/')"
-                                                    :is="navigationIcon[3]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else-if="menu.path.includes('/anomali-pengaduan/')"
-                                                    :is="navigationIcon[4]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
-                                                    :is="navigationIcon[5]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else-if="menu.path.includes('/material/')"
-                                                    :is="navigationIcon[6]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else-if="menu.path.includes('/transaksi/')"
-                                                    :is="navigationIcon[7]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
-                                                <component v-else :is="navigationIcon[8]" alt="icon"
-                                                    :class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
+                                            <li @click="command.openMenu(menu)" class="group">
+                                                <div class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none lex group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
+                                                    <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
+                                                        alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else-if="menu.path.includes('/keluhan/')"
+                                                        :is="navigationIcon[1]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else-if="menu.path.includes('/monalisa/')"
+                                                        :is="navigationIcon[2]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else-if="menu.path.includes('/check-in-out/')"
+                                                        :is="navigationIcon[3]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else-if="menu.path.includes('/anomali-pengaduan/')"
+                                                        :is="navigationIcon[4]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
+                                                        :is="navigationIcon[5]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else-if="menu.path.includes('/material/')"
+                                                        :is="navigationIcon[6]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else-if="menu.path.includes('/transaksi/')"
+                                                        :is="navigationIcon[7]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                                                    <component v-else :is="navigationIcon[8]" alt="icon"
+                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
 
-                                                <div class="flex flex-col flex-1 ml-3 space-y-1">
-                                                    <span
-                                                        :class="[active ? 'text-white' : 'text-gray-800', 'text-sm font-medium line-clamp-1']">
-                                                        {{ menu.name }}
-                                                    </span>
-                                                    <span
-                                                        :class="[active ? 'text-white' : 'text-gray-500', 'text-xs line-clamp-1']">
-                                                        {{ menu.path.replace('/home/', '') }}
+                                                    <div class="flex flex-col flex-1 ml-3 space-y-1">
+                                                        <span
+                                                            class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
+                                                            {{ menu.name }}
+                                                        </span>
+                                                        <span
+                                                            class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
+                                                            {{ menu.path.replace('/home/', '') }}
+                                                        </span>
+                                                    </div>
+                                                    <span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
+                                                        Buka
                                                     </span>
                                                 </div>
-                                                <span v-if="active" class="flex-none ml-3 text-gray-200">
-                                                    Buka
-                                                </span>
+                                                
 
                                             </li>
                                         </ComboboxOption>
@@ -146,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
 import {
     Combobox,