Navbar Menu
This commit is contained in:
Stephen
@@ -1,54 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- :location="$vuetify.display.mobile ? 'bottom' : undefined" -->
|
||||
<v-navigation-drawer style="border: 0;" v-model="drawer">
|
||||
<v-list-item class="ml-2 mt-3">
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
max-height="42px"
|
||||
max-width="132px"
|
||||
class="bg-white"
|
||||
src="../globalimages/logo.png"
|
||||
></v-img>
|
||||
</v-list-item>
|
||||
<v-navigation-drawer style="border: 0;"class="pa-2" v-model="drawer" :width="320">
|
||||
<!-- <v-navigation-drawer temporary class="blue lighten-2" v-model="drawer" dark fixed app> -->
|
||||
<v-list density="compact">
|
||||
<v-list-item class="my-5">
|
||||
<v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="images/logo.png"></v-img>
|
||||
</v-list-item>
|
||||
<!-- LEVEL 0 -->
|
||||
<template v-for="(lev_0, i) in level_0" :key="lev_0.id" >
|
||||
<v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg">
|
||||
<v-list-item-title >{{ lev_0.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-group v-else :value="lev_0.name" >
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item v-bind="props" color="primary" rounded="lg" >
|
||||
<v-list-item-title>{{ lev_0.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<!-- LEVEL 1 -->
|
||||
<template v-for="(lev_1, j) in level_1['p_' + lev_0.id]" :key="lev_1.id">
|
||||
<v-list-item v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent === 'N'" @click="goto(lev_1.url)" color="primary" rounded="lg" class="{'primary--text': activeItem === lev_2.id}">
|
||||
<v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_1.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-group v-else :value="lev_1.state" v-show="level_2['p_' + lev_1.id]" sub-group no-action >
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item v-bind="props" color="primary"rounded="lg" >
|
||||
<v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_1.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<!-- LEVEL 2 -->
|
||||
<template v-for="(lev_2, k) in level_2['p_' + lev_1.id]" :key="lev_2.id">
|
||||
<v-list-item class="" @click="goto(lev_2.url)" color="primary" rounded="lg">
|
||||
<v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_2.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-list-group>
|
||||
</template>
|
||||
</v-list-group>
|
||||
</template>
|
||||
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "MenuComponent",
|
||||
data() {
|
||||
return {};
|
||||
export default {
|
||||
name: "MenuComponent",
|
||||
data() {
|
||||
return {activeItem: null};
|
||||
},
|
||||
mounted() {
|
||||
// Memuat data saat komponen di-mount
|
||||
this.$store.dispatch('system/loadMenuData');
|
||||
},
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
level_0() {
|
||||
return this.$store.state.system.menu_level_0
|
||||
},
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
drawer: {
|
||||
get() {
|
||||
return this.$store.state.system.drawer;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("system/setDrawer", val);
|
||||
},
|
||||
|
||||
level_1() {
|
||||
return this.$store.state.system.menu_level_1
|
||||
},
|
||||
|
||||
level_2() {
|
||||
return this.$store.state.system.menu_level_2
|
||||
},
|
||||
drawer: {
|
||||
get() {
|
||||
return this.$store.state.system.drawer;
|
||||
},
|
||||
count() {
|
||||
return this.$store.state.coba2.count;
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba2.email;
|
||||
set(val) {
|
||||
this.$store.commit("system/update_drawer", val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// Dispatch action ke store
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goto(url) {
|
||||
console.log("menuju ke- ", url)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,54 +5,57 @@
|
||||
<v-app-bar class="elevation-0">
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
|
||||
<v-app-bar-title>Application</v-app-bar-title>
|
||||
<v-app-bar-title>{{ bread_crumb }}</v-app-bar-title>
|
||||
</v-app-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
import MenuComponent from "./one-menu.vue";
|
||||
import MenuComponent from "./one-menu.vue";
|
||||
|
||||
export default {
|
||||
name: "NavbarComponent",
|
||||
components: {
|
||||
"one-menu": MenuComponent,
|
||||
export default {
|
||||
name: "NavbarComponent",
|
||||
components: {
|
||||
"one-menu": MenuComponent,
|
||||
},
|
||||
mounted() {
|
||||
console.log("drawer");
|
||||
console.log(this.$store.state.system.drawer);
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
bread_crumb() {
|
||||
return this.$store.state.system.bread_crumb
|
||||
},
|
||||
count() {
|
||||
return this.$store.state.coba2.count;
|
||||
},
|
||||
mounted() {
|
||||
console.log("drawer");
|
||||
console.log(this.$store.state.system.drawer);
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
// Akses state dari store
|
||||
count() {
|
||||
return this.$store.state.coba2.count;
|
||||
drawer: {
|
||||
get() {
|
||||
return this.$store.state.system.drawer;
|
||||
},
|
||||
drawer: {
|
||||
get() {
|
||||
return this.$store.state.system.drawer;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("system/setDrawer", val);
|
||||
},
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba2.email;
|
||||
set(val) {
|
||||
this.$store.commit("system/update_drawer", val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// Dispatch action ke store
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
email() {
|
||||
return this.$store.state.coba2.email;
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// Dispatch action ke store
|
||||
increment() {
|
||||
this.$store.dispatch("increment");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user