90 lines
3.2 KiB
Vue
90 lines
3.2 KiB
Vue
<template>
|
|
<v-navigation-drawer style="border: 0;"class="pa-4" v-model="drawer" :width="380">
|
|
<!-- <v-navigation-drawer temporary class="blue lighten-2" v-model="drawer" dark fixed app> -->
|
|
<v-list>
|
|
<v-list-item class="my-5">
|
|
<v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="../globalimages/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" class="my-2">
|
|
<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" class="mb-3">
|
|
<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>
|
|
</template>
|
|
|
|
<script type="module">
|
|
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
|
|
},
|
|
|
|
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;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("system/update_drawer", val);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
goto(url) {
|
|
console.log("menuju ke- ", url)
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
h1 {
|
|
color: blue;
|
|
}
|
|
</style>
|