<template>
  <!-- Loading -->
  <div
    v-if="!finishLoading"
    class="q-pa-md"
  >
    <q-skeleton
      v-for="i in 4"
      :key="i"
      type="text"
      class="q-mb-sm"
    />
  </div>

  <!-- Menu -->
  <div
    v-else
    class="no-border"
  >
    <q-list class="rounded-borders text-primary">
      <!-- Top-level items -->
      <template v-if="myroutes && myroutes.length">
        <CMenuItem
          v-for="route in myroutes.filter(
            (r) => r && r.active && r.inmenu && !r.submenu && tools.visumenu(r)
          )"
          :key="route._id || route.path || route.title"
          :item="route"
          :tools="tools"
          :getroute="getroute"
          :getmymenuclass="getmymenuclass"
          :getimgiconclass="getimgiconclass"
          :clBase="clBase"
          :level="1"
        />
      </template>

      <!-- Empty state -->
      <div
        v-else
        class="q-pa-md text-grey-7 text-caption"
      >
        Nessuna voce di menu disponibile.
      </div>
    </q-list>
  </div>
</template>

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

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