<template>
  <ul class="menu">
    <li v-for="(item, idx) of navigationList" :class="{'menu__item': !item.isGroup,'menu__group': item.isGroup}" :key="idx">
        <ul v-if="item.isGroup" :class="{'menu__list': item.isGroup}">
            <li class="menu__heading">{{item.name|| "test"}}</li>
            <li v-for="(item, idx) of item.items"  :class="{'menu__item': !item.isGroup,'menu__group': item.isGroup}" class="mx-2" :key="idx" @click="$router.push({path:item.to})">
                {{item.name}}
            </li>
        </ul>
        <div v-else @click="$router.push({path:item.to})">
            {{item.name}}
        </div>
    </li>
    
  </ul>
</template>

<script>
import "../../../dist/components/AppMenu.css"
export default {
  name: "sui-app-menu",
  props: {
    dark: {
      type: Boolean,
      default: false,
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    navigationList() {
        return this.createList({name:null, items:this.items})
    },
  },
  methods: {
    createItem({ name, to, icon }) {
        return {name,to,icon, isGroup:false}
    },
    createList({ name, items }) {
      const list = []
      console.log(name, items)   
      items.forEach((item) => {
        item.items ? list.push({name:item.name,items:this.createList(item),isGroup:true}) : list.push(this.createItem(item));
      });
      return list
    },
  },
};
</script>

<style lang="scss" scoped></style>
