155 lines
4.4 KiB
Vue
155 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<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-title>WESTONE</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,
|
|
"quick-menu": QuickMenu,
|
|
},
|
|
data() {
|
|
return {
|
|
drawer: false,
|
|
isUsersOpen: true,
|
|
admins: [
|
|
['Management', 'mdi-account-multiple-outline'],
|
|
['Settings', 'mdi-cog-outline'],
|
|
],
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
// Akses state dari Vuex
|
|
bread_crumb() {
|
|
return this.$store.state.system.bread_crumb;
|
|
},
|
|
count() {
|
|
return this.$store.state.coba2.count;
|
|
},
|
|
email() {
|
|
return this.$store.state.coba2.email;
|
|
},
|
|
},
|
|
methods: {
|
|
// Dispatch action ke store
|
|
increment() {
|
|
this.$store.dispatch("increment");
|
|
},
|
|
toggleDrawer() {
|
|
this.drawer = !this.drawer;
|
|
console.log(this.drawer)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
h1 {
|
|
color: blue;
|
|
}
|
|
</style>
|