<template>
	<view class="pointer">
		<template v-for="(item,index) in data">
			<template v-if="!item.children || !item.children.length">
				<uni-menu-item :index="item">
					<view class="items">
						<view class="icon" :class="item.icon"></view>
						<text class="text" :class="{title: item.icon}">{{item.text}}</text>
					</view>
				</uni-menu-item>
			</template>
			<uni-sub-menu v-else :index="item">
				<template v-slot:title>
					<view :class="item.icon"></view>
					<text :class="{title: item.icon}">{{item.text}}</text>
				</template>
				<uni-menu-sidebar class="item-bg"  :data="item.children" :key="item._id" />
			</uni-sub-menu>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'uniMenuSidebar',
		props: {
			data: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {};
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.items{
		font-size: 17px;
		padding: 20px 0;
		.icon{
			float: left;
			font-size: 30px;
		}
		.text{
			float: left;
			margin-top: 3px;
		}
	}
	.title {
		margin-left: 10px;
	}
</style>
