<template>
  <div :style="{ paddingLeft: `${level * 4}px` }">

    <q-separator v-if="item.isseparator" />
    <q-expansion-item
      v-else-if="item.routes2 || (item.sottoMenu && item.sottoMenu.length > 0)"
      :content-inset-level="item.level_parent"
      :header-class="getmymenuclass(item)"
      :header-inset-level="item.level_parent"
      :icon="item.materialIcon"
      :label="tools.getLabelByItem(item)"
      active-class="my-menu-active"
      :expand-icon-class="item.mainMenu ? 'my-menu-separat' : ''"
      :expand-icon="
        item.mainMenu || item.routes2 ? 'fas fa-chevron-down' : 'none'
      "
    >
      <router-link :to="getroute(item)" custom>
        <c-menu-item
          v-for="(childItem, childIndex) in item.routes2 || (item.sottoMenu && item.sottoMenu.length > 0)"
          :key="childIndex"
          :item="getmenuByPath(childItem)"
          :tools="tools"
          :getroute="getroute"
          :getmymenuclass="getmymenuclass"
          :getimgiconclass="getimgiconclass"
          :clBase="clBase"
          :mainMenu="item.mainMenu"
          :level="level + 1"
        />
      </router-link>
    </q-expansion-item>
    <router-link v-else :to="getroute(item)" custom>
      <q-item
        clickable
        :to="getroute(item)"
        @click="makeClick"
        :content-inset-level="item.level_parent"
        :header-inset-level="item.level_parent"
        active-class="my-menu-active"
        expand-icon="none"
      >
        <q-item-section thumbnail>
          <q-avatar
            :icon="item.materialIcon"
            :size="!!item.iconsize ? item.iconsize : '2rem'"
            :font-size="!!item.iconsize ? item.iconsize : '2rem'"
            text-color="primary"
            square
            rounded
          >
          </q-avatar>
        </q-item-section>

        <q-item-section>
          <span :class="item.extraclass">{{ tools.getLabelByItem(item) }}</span>
          <span v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</span>
        </q-item-section>
      </q-item>
    </router-link>
  </div>
</template>

<script lang="ts" src="./CMenuItem.ts">
</script>

<style lang="scss" scoped>
@import './CMenuItem.scss';
</style>
