<template>
    <v-navigation-drawer 
        app 
        temporary 
        width="320" 
        v-model="appDrawer.isVisible"
    >
        <v-list-item dense>
            <v-list-item-content>
                <v-list-item-title >
                    <span class="text-h6 blue--text text--darken-3">
                        {{ __(appDrawer.caption) }}
                    </span>
                </v-list-item-title>
                <v-list-item-subtitle class="blue--text text--darken-3">
                    {{ __(appDrawer.subtitle ) }}
                </v-list-item-subtitle>
            </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

		<tree-list 
			:items="appDrawer.getOptions"
		/>

    </v-navigation-drawer>
</template>

<script>
    export default {
        props: {
            app: {required: true},
        },

        computed: {
            appDrawer() {
                return this.app.menus.Drawer;
            }
        },
        
        name: 'ApplicationLeftDrawer',
    }
</script>