update navigation all
This commit is contained in:
sas.fajri
@@ -1,45 +1,135 @@
|
||||
<template>
|
||||
<div>
|
||||
<one-menu></one-menu>
|
||||
<v-app-bar>
|
||||
<!-- Slot prepend -->
|
||||
<template v-slot:prepend>
|
||||
<v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer"></v-app-bar-nav-icon>
|
||||
</template>
|
||||
|
||||
<v-app-bar class="elevation-0">
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-app-bar-title>WESTONE</v-app-bar-title>
|
||||
|
||||
<v-app-bar-title>{{ bread_crumb }}</v-app-bar-title>
|
||||
<!-- Slot append -->
|
||||
<template v-slot:append>
|
||||
<v-menu v-model="menu" location="top start" origin="top start" transition="scale-transition">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip v-bind="props" class="ma-2" variant="text">
|
||||
<v-icon icon="mdi-account-circle-outline" start></v-icon>
|
||||
John Leider
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<v-card width="300">
|
||||
<v-list bg-color="black">
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar image="https://cdn.vuetifyjs.com/images/john.png"></v-avatar>
|
||||
</template>
|
||||
|
||||
<v-list-item-title>John Leider</v-list-item-title>
|
||||
|
||||
<v-list-item-subtitle>john@google.com</v-list-item-subtitle>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-list-item-action>
|
||||
<v-btn variant="text" icon @click="menu = false">
|
||||
<v-icon>mdi-close-circle</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-list>
|
||||
<v-list-item prepend-icon="mdi-briefcase" link>
|
||||
<v-list-item-subtitle>john@gmail.com</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
|
||||
<v-divider class="mx-2 " vertical></v-divider>
|
||||
<v-menu :close-on-content-click="false" location="center">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn variant="tonal" append-icon="mdi-open-in-new" class="text-none text-subtitle-1 ma-2" color="primary" flat small v-bind="props">
|
||||
Quick Menu
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card min-width="200" class="mx-auto">
|
||||
<v-list density="compact" nav>
|
||||
<v-list-subheader
|
||||
class="font-bold text-high-emphasis text-uppercase font-weight-black">REPORTS</v-list-subheader>
|
||||
|
||||
<v-list-item v-for="(item, i) in items" :key="i" :value="item" color="primary">
|
||||
<template v-slot:prepend>
|
||||
<v-icon :icon="item.icon"></v-icon>
|
||||
</template>
|
||||
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
|
||||
|
||||
<!-- Bind v-model ke drawer dari Vuex -->
|
||||
<v-navigation-drawer temporary v-model="drawer">
|
||||
<v-list :lines="false" density="compact" nav>
|
||||
<v-list-group active-color="primary" value="Admin">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item v-bind="props" title="Admin" prepend-icon="mdi-account-multiple-outline"></v-list-item>
|
||||
</template>
|
||||
|
||||
<v-list-item v-for="([title], i) in admins" :key="i" :title="title" :value="title"></v-list-item>
|
||||
</v-list-group>
|
||||
</v-list>
|
||||
|
||||
</v-navigation-drawer>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const menu = ref(false)
|
||||
const items = [
|
||||
{ text: 'Real-Time', icon: 'mdi-clock' },
|
||||
{ text: 'Audience', icon: 'mdi-account' },
|
||||
{ text: 'Conversions', icon: 'mdi-flag' },
|
||||
]
|
||||
</script>
|
||||
<script type="module">
|
||||
import MenuComponent from "./one-menu.vue";
|
||||
import QuickMenu from "./quick-menu.vue";
|
||||
|
||||
export default {
|
||||
name: "NavbarComponent",
|
||||
components: {
|
||||
"one-menu": MenuComponent,
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.$store.state.system.drawer);
|
||||
"quick-menu": QuickMenu,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
drawer: false,
|
||||
isUsersOpen: true,
|
||||
admins: [
|
||||
['Management', 'mdi-account-multiple-outline'],
|
||||
['Settings', 'mdi-cog-outline'],
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
// Akses state dari Vuex
|
||||
bread_crumb() {
|
||||
return this.$store.state.system.bread_crumb
|
||||
},
|
||||
return this.$store.state.system.bread_crumb;
|
||||
},
|
||||
count() {
|
||||
return this.$store.state.coba2.count;
|
||||
},
|
||||
drawer: {
|
||||
get() {
|
||||
return this.$store.state.system.drawer;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("system/update_drawer", val);
|
||||
},
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba2.email;
|
||||
},
|
||||
@@ -49,6 +139,10 @@ export default {
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
toggleDrawer() {
|
||||
this.drawer = !this.drawer;
|
||||
console.log(this.drawer)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user