<template>
	<v-navigation-drawer

		v-model="drawerState"
		clipped
	>
		<v-list
		>
			<v-list-item
				v-for="item in menu.items"
				:key="item.title"
				:to="item.link"
				link
			>
				<v-list-item-icon>
					<v-icon>{{ item.icon }}</v-icon>
				</v-list-item-icon>
				<v-list-item-content>
						<v-list-item-title>{{ item.title }}</v-list-item-title>
				</v-list-item-content>
			</v-list-item>
		</v-list>
	</v-navigation-drawer>
</template>

<script>

import { watch, ref } from 'vue'

export default {

	props:{
		drawerStateInput:Boolean
	},

	setup(props) {
		const menu = ref({items:
			[
				{
					title: '1',
					link: '/tasks',
					icon: 'mdi-briefcase-clock'
				},
				{
					title: '2',
					link: '/catalogues',
					icon: 'mdi-book'
				},
				{
					title: '3',
					link: '/registries',
					icon: 'mdi-file-table-box-multiple-outline'
				},
				{
					title: '4',
					link: '/files',
					icon: 'mdi-file-tree'
				},
			]})

		const drawerState = ref(props.drawerStateInput)

		watch(() => props.drawerStateInput, (value) => {
      drawerState.value = value
			console.log(drawerState.value)
    })


		return {
			menu
		}
	}
}
</script>