<template>
  <q-list>
    <q-item class="item-list-menu column">
      <ItemMenu v-for="item in menuList" :key="item.id" :path="item.path" :label="item.label"
                :icon="item.icon" :selectedItemMenu="selectedItemMenu" :items="item.subitems"
                @selectedItem="changeSelectedItemMenu" />
    </q-item>
  </q-list>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import ItemMenu from "./components/ItemMenu.vue";
import itemMenuList from '../../mixins/itemMenuList';

@Component({
  components: {ItemMenu}
})
export default class Menu extends Vue {
  readonly menuList = itemMenuList;
  selectedItemMenu = ""

  changeSelectedItemMenu(value: string) {
    this.selectedItemMenu = value;
  }
}
</script>

<style lang="scss" scoped>
.item-list-menu {
  padding: 0;
}
</style>