<template>
  <Menu
    ref="sideMenu"
    :active-name="$route.name"
    :open-names="openNames"
    :theme="menuTheme"
    width="auto"
    @on-select="changeMenu"
  >
    <template v-for="item in menuList">
      <MenuItem
        v-if="!item.children.length"
        :name="item.children[0].name"
        :key="item.path"
      >
        <i
          :class="item.icon"
          :style="{ fontSize: iconSize }"
          aria-hidden="true"
        ></i>
        <span class="layout-text" :key="item.path">{{ itemTitle(item) }}</span>
      </MenuItem>
      <Submenu v-else :name="item.name" :key="item.path">
        <template slot="title">
          <i
            :class="item.icon"
            :style="{ fontSize: iconSize }"
            aria-hidden="true"
          ></i>
          <span class="layout-text">{{ itemTitle(item) }}</span>
        </template>
        <template v-for="child in item.children">
          <MenuItem :name="child.name" :key="child.name">
            <i
              :class="child.icon"
              :style="{ fontSize: iconSize }"
              aria-hidden="true"
            ></i>
            <span class="layout-text" :key="child.name">{{ child.title }}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
  </Menu>
</template>

<script>
export default {
  name: "sidebarMenu",
  props: {
    menuList: Array,
    iconSize: Number,
    menuTheme: {
      type: String,
      default: "dark",
    },
    openNames: {
      type: Array,
    },
  },
  methods: {
    changeMenu(active) {
      this.$emit("on-change", active);
    },
    itemTitle(item) {
      if (typeof item.title === "object") {
        return this.$t(item.title.i18n);
      } else {
        return item.title;
      }
    },
  },
  updated() {
    this.$nextTick(() => {
      if (this.$refs.sideMenu) {
        this.$refs.sideMenu.updateOpened();
      }
    });
  },
};
</script>
