https://www.youtube.com/watch?v=VebE7nZcIbM bunu buldum App.vue sadece ana dizin onu saymazsak toplamda 2 dosyadan oluşuyor menu.vue ve menu item
Menu.vue
<template>
<div class="menu" :class="{ 'small-menu': smallMenu }">
<MenuItem
v-for="(item, index) in menuTree"
:key="index"
:data="item.children"
:label="item.label"
:icon="item.icon"
:depth="0"
:smallMenu="smallMenu"
/>
<i @click="smallMenu = !smallMenu" class="material-icons">menu</i>
</div>
</template>
<script>
import MenuItem from './MenuItem.vue';
export default {
name: 'recursive-menu',
data: () => ({
smallMenu: false,
menuTree: [
{
label: "Home",
icon: "home",
children: [
{
label: "level 1.1",
children: [
{
label: "level 1.1.1",
children: [
{
label: "level 1.1.1.1"
}
]
}
]
},
{
label: "level 1.2"
}
]
},
{
label: "Dashboard",
icon: "dashboard",
children: [
{
label: "level 2.1",
},
{
label: "level 2.2"
},
{
label: "level 2.3"
}
]
},
{
label: "Settings",
icon: "settings"
}
]
}),
components: {
MenuItem
}
}
</script>
menuItem.vue
<template>
<div class="menu-item" :class="{ opened: expanded }">
<div
class="label"
@click="toggleMenu()"
:style="{ paddingLeft: depth * 20 + 20 + 'px' }"
>
<div class="left">
<i v-if="icon" class="material-icons-outlined">{{ icon }}</i>
<span v-if="showLabel">{{ label }}</span>
</div>
<div v-if="data" class="right">
<i class="expand material-icons" :class="{ opened: expanded }">expand_more</i>
</div>
</div>
<div
v-show="showChildren"
:class="{ 'small-menu': smallMenu }"
class="items-container"
:style="{ height: containerHeight }"
ref="container"
>
<menu-item
:class="{ opened: showChildren }"
v-for="(item, index) in data"
:key="index"
:data="item.children"
:label="item.label"
:icon="item.icon"
:depth="depth + 1"
:smallMenu="smallMenu"
/>
</div>
</div>
</template>
<script>
export default {
name: "menu-item",
data: () => ({
showChildren: false,
expanded: false,
containerHeight: 0,
}),
props: {
data: {
type: Array,
},
label: {
type: String,
},
icon: {
type: String,
},
depth: {
type: Number,
},
smallMenu: {
type: Boolean,
},
},
computed: {
showLabel() {
return this.smallMenu ? this.depth > 0 : true;
}
},
methods: {
toggleMenu() {
this.expanded = !this.expanded;
if (!this.showChildren) {
this.showChildren = true;
this.$nextTick(() => {
this.containerHeight = this.$refs["container"].scrollHeight + "px";
setTimeout(() => {
this.containerHeight = "fit-content";
if(navigator.userAgent.indexOf("Firefox") != -1)
this.containerHeight = "-moz-max-content"
this.$refs["container"].style.overflow = "visible";
}, 300);
});
} else {
this.containerHeight = this.$refs["container"].scrollHeight + "px";
this.$refs["container"].style.overflow = "hidden";
setTimeout(() => {
this.containerHeight = 0 + "px";
}, 10);
setTimeout(() => {
this.showChildren = false;
}, 300);
}
},
},
};
</script>
Bu kadar karışık olmak zorundamı yada bu en sade halimi ?
Bundan daha sadesi olmazmı ?