From 32a2f1b2f5e305b5a75c3d32f49438fb952d7ad0 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 27 Oct 2023 10:00:51 +0700
Subject: [PATCH] update command palettes background

---
 src/assets/css/style.css           | 13 +++++++
 src/components/CommandPalettes.vue | 54 ++++++++++++++++++++++++++++--
 2 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f576e7c..9b85805 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1547,6 +1547,10 @@ select {
   --tw-divide-opacity: 0.1;
 }
 
+.divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1821,6 +1825,10 @@ select {
   --tw-bg-opacity: 0.8;
 }
 
+.bg-opacity-100 {
+  --tw-bg-opacity: 1;
+}
+
 .fill-gray-500 {
   fill: #6b7280;
 }
@@ -2324,6 +2332,11 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index 27376d3..957129a 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -10,8 +10,9 @@
                 <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 scale-95"
                     enter-to="opacity-100 scale-100" leave="ease-in duration-200" leave-from="opacity-100 scale-100"
                     leave-to="opacity-0 scale-95">
+                    <!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->
                     <DialogPanel
-                        class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl bg-opacity-80 ring-0 ring-black ring-opacity-5">
+                        class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-100 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5">
                         <Combobox>
                             <div class="relative">
                                 <MagnifyingGlassIcon
@@ -29,7 +30,7 @@
                                         class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
                                         Terakhir Diakses
                                     </h2>
-                                    <ul class="text-sm text-gray-700">
+                                    <!-- <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)"
@@ -73,6 +74,55 @@
                                                     Buka
                                                 </span>
 
+                                            </li>
+                                        </ComboboxOption>
+                                    </ul> -->
+                                    <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']" />
+
+                                                <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/', '') }}
+                                                    </span>
+                                                </div>
+                                                <span v-if="active" class="flex-none ml-3 text-gray-200">
+                                                    Buka
+                                                </span>
+
                                             </li>
                                         </ComboboxOption>
                                     </ul>