<template>
  <q-item :to="menu.MenuUrl" clickable v-ripple :active="currentPath == menu.MenuUrl" v-if="!menu.SubList || menu.SubList.length == 0" :key="menu.MenuId">
    <q-item-section avatar style="min-width: 30px">
      <q-icon :name="menu.MenuIcon" size="20px" />
    </q-item-section>
    <q-item-section>{{ menu.MenuName }}</q-item-section>
  </q-item>
  <q-expansion-item class="diy-group-items" v-else :label="menu.MenuName" :icon="menu.MenuIcon">
    <q-item class="q-ml-md" style="padding-left:38px;" :to="y.MenuUrl" clickable v-ripple :active="currentPath == y.MenuUrl" v-for="(y, yi) in menu.SubList" :key="yi">
      <q-item-section>{{ y.MenuName }}</q-item-section>
    </q-item>
  </q-expansion-item>
</template>

<script>
import { defineComponent,inject } from 'vue'

export default defineComponent({
  name: 'nav-item',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  setup() {
      let currentPath=inject('currentPath')
      return {currentPath}
  }
})
</script>

<style></style>
<style>
.navs-list .diy-group-items .q-item__section--avatar{
  min-width: 30px !important;
}
.navs-list .q-item.q-router-link--active, .q-item--active{
  color:var(--q-primary) !important;
}
</style>