update navigation all

globalcomponent/quick-menu.vue

@@ -1,18 +1,76 @@
 <template>
-    <div class="rounded-xl bg-primary-lighten mx-2 my-2">
-        <v-container fluid style="overflow-x: auto; white-space: nowrap">
-            <v-btn
-                class="mr-2"
-                size="small"
-                :variant="active_menu.id === qmenu.id ? 'elevated' : 'outlined'"
-                rounded="xl"
-                color="primary-darken"
-                v-for="qmenu in qmenus"
-                @click="redirect(qmenu)"
-            >
-                {{ qmenu.name }}
-            </v-btn>
-        </v-container>
+    <div style="display: flex;
+  flex-direction: column; width:80%" class=" mx-2 my-1 mb-3">
+  
+    <v-card 
+    
+    ref="menuContainer" elevation="0"
+            v-click-outside="{
+                handler: onClickOutside,
+                include
+            }"
+      variant="flat">
+        <v-list-item class="px-2">
+        <!--<template v-slot:prepend>
+            <v-avatar class="pl-3" size="48">🎯</v-avatar>
+        </template>-->
+
+        <template v-slot:title> 
+            <div class="pa-0 pt-2 pb-2 scroll-container horizontal secondary" fluid style="overflow-x: auto; white-space: nowrap">
+                <v-text-field
+                    v-show="listing_menu"
+                    density="compact"
+                    label="Search Menu"
+                    variant="outlined"
+                    v-model="searchQuery" placeholder="Search menu..." @input="searchItems"
+                    hide-details
+                    single-line
+                    @click:append-inner="onClick"
+                    ref="searchInput"
+                ></v-text-field>
+                <v-btn
+                    v-show="!listing_menu"
+                    class="mr-2"
+                    size="small"
+                    :variant="active_menu.id === qmenu.id ? 'tonal' : 'text'"
+                    v-for="qmenu in qmenus"
+                    @click="redirect(qmenu)"
+                >
+                    {{ qmenu.name }}
+                </v-btn>
+            </div>
+        </template>
+
+        <template v-slot:append>
+            <v-btn  @click="showHideListingMenu()" v-show="listing_menu == false" icon="mdi-magnify" variant="text"></v-btn>
+            <v-btn  @click="showHideListingMenu()"  v-show="listing_menu === true" icon="mdi-close" variant="text"></v-btn>
+        </template>
+        </v-list-item>
+
+
+        <v-card-text  v-if="listing_menu" class="text-medium-emphasis">
+    
+        <v-list variant="text" v-if="listing_menu">
+
+                    <v-list-item
+                       class="included"
+                        v-for="(item, i) in limitedMenus"
+                        :key="i"
+                        :value="item"
+                        color="primary"
+                        @click="redirect(qmenu)"
+     
+                    >
+                        <template v-slot:prepend>
+                        <v-icon icon="mdi-arrow-forward"></v-icon>
+                        </template>
+
+                        <v-list-item-title v-text="item.name"></v-list-item-title>
+                    </v-list-item>
+                </v-list>
+     
+        </v-card-text>
+    </v-card>
     </div>
 </template>
 
@@ -25,6 +83,9 @@
         data() {
             return {
                 pressed: false,
+                listing_menu:false,
+                searchQuery:'',
+                clickOutsideEnabled: false,
             }
         },
         computed: {
@@ -38,13 +99,46 @@
                 set(menu) {
                     this.$store.commit("system/update_active_menu", menu);
                 }
+            },
+            menus(){
+                return this.$store.state.system.quick_menu;
+            },
+            limitedMenus: {
+                get() {
+                    return this.$store.state.system.active_menu;
+                },
+                set(menu) {
+                    this.$store.commit("system/update_active_menu", menu);
+                }
             }
         },
         methods: {
             redirect(item) {
+                this.listing_menu = false
                 this.active_menu = item;
-                console.log("redirect url ", item.url);
-            }
+                //console.log("redirect url ", item.url);
+            },
+            showHideListingMenu(){
+                let xnow = this.listing_menu
+                this.listing_menu = xnow?false:true
+                this.$nextTick(() => {
+                    if (this.listing_menu) {
+                        this.$refs.searchInput.focus(); // Fokuskan input setelah menu ditampilkan
+                    }
+                });
+            },
+            searchItems() {
+                this.limitedMenus = this.menus.filter(item => {
+                    return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ;
+                });
+            },
+            onClickOutside () {
+                this.listing_menu = false
+            },
+            include () {
+                return [document.querySelector('.included')]
+            },
+
         },
     }
 </script>