FE_CPONE/apps/components/oneMenuDrawerGlobal.vue

<template>
  <v-navigation-drawer  temporary class="blue lighten-2" v-model="drawer" dark  fixed app>
    <v-list>
      <!-- IF NO CHILD -->
      <template
        v-for="(lev_0, i) in level_0"
      >
        <v-list-tile  class="tile"
          :key="i"
          v-show="!level_1['p_'+lev_0.id]"
          @click="goTo(lev_0.url)">
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-title >{{ lev_0.name }}</v-list-tile-title>
        </v-list-tile>

      </template>


      <!-- HAVING CHILDREN -->
      <template
        v-for="(lev_0, i) in level_0"
      >
        <v-list-group
          v-bind:key="i"
          prepend-icon="account_circle"
          :value="lev_0.state"
          v-show="level_1['p_'+lev_0.id]"
        >
          <template v-slot:activator>
            <v-list-tile  class="tile">
              <v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
            </v-list-tile>
          </template>

          <!-- LEVEL 1 STARTS HERE -->
          <!-- NOT HAVING CHILD -->
          <template
            v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
          >
              <v-list-tile  class="tile"
                v-bind:key="j"
                v-show="!level_2['p_'+lev_1.id]"
                sub-group
                no-action
                @click="goTo(lev_1.url)"
                >
                <v-list-tile-action>
                  <!-- <v-icon>home</v-icon> -->
                </v-list-tile-action>
                <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
              </v-list-tile>
          </template>

          <!-- HAVING CHILD -->
          <template
            v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
          >

              <v-list-group
                v-bind:key="j"
                :value="lev_1.state"
                v-show="level_2['p_'+lev_1.id]"
                sub-group
                no-action
              >
                <template v-slot:activator>
                  <v-list-tile  class="tile">
                    <v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
                  </v-list-tile>
                </template>

                <!-- LEVEL 2 STARTS HERE -->
                <template
                  v-for="(lev_2, k) in level_2['p_'+lev_1.id]"
                >
                  <v-list-tile  class="tile"
                    :key="k"
                    @click="goTo(lev_2.url)">
                    <!-- <v-list-tile-action>
                      <v-icon>home</v-icon>
                    </v-list-tile-action> -->
                    <v-list-tile-title>{{ lev_2.name }}</v-list-tile-title>
                  </v-list-tile>

                </template>
                <!-- END OF LEVEL 2 -->

              </v-list-group>
          </template>
          <!-- END OF LEVEL 1 -->

        </v-list-group>
      </template>
    </v-list>

    <!-- <v-list>
      <v-list-tile  class="tile">
        <v-list-tile-action>
          <v-icon>home</v-icon>
        </v-list-tile-action>
        <v-list-tile-title>Home</v-list-tile-title>
      </v-list-tile>

      <v-list-group
        prepend-icon="account_circle"
        value="true"
      >
        <template v-slot:activator>
          <v-list-tile  class="tile">
            <v-list-tile-title>Users</v-list-tile-title>
          </v-list-tile>
        </template>
        <v-list-group
          no-action
          sub-group
          value="true"
        >
          <template v-slot:activator>
            <v-list-tile  class="tile">
              <v-list-tile-title>Admin</v-list-tile-title>
            </v-list-tile>
          </template>

          <v-list-tile
            v-for="(admin, i) in admins"
            :key="i"
            @click=""
          >
            <v-list-tile-title v-text="admin[0]"></v-list-tile-title>
            <v-list-tile-action>
              <v-icon v-text="admin[1]"></v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list-group>

        <v-list-group
          sub-group
          no-action
        >
          <template v-slot:activator>
            <v-list-tile  class="tile">
              <v-list-tile-title>Actions</v-list-tile-title>
            </v-list-tile>
          </template>
          <v-list-tile
            v-for="(crud, i) in cruds"
            :key="i"
            @click=""
          >
            <v-list-tile-title v-text="crud[0]"></v-list-tile-title>
            <v-list-tile-action>
              <v-icon v-text="crud[1]"></v-icon>
            </v-list-tile-action>
          </v-list-tile  class="tile">
        </v-list-group>
      </v-list-group>
    </v-list> -->
    <!-- <v-list dense>
      <v-list-tile  class="tile">
        <v-list-tile-action>
          <v-icon>home</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Home</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile  class="tile">
        <v-list-tile-action>
          <v-icon>contact_mail</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Contact</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list> -->
  </v-navigation-drawer>
</template>

<style scoped>
  .tile {
    margin: 5px;
    border-radius: 4px;
  }
  .tile:hover {
    background-color: #1E88E5;
  }
  .tile:active {
    background: #bec5b7;
  }
  .v-list__group__header__prepend-icon .v-icon {
    color: #3b60f2;
}
.v-list__tile__title:hover {
    color: #BBDEFB;
}
</style>
<script>
module.exports = {
  props: {
    drawer: Boolean
  },

  computed : {
    level_0 () {
      return this.$store.state.menu.menu_level_0
    },

    level_1 () {
      return this.$store.state.menu.menu_level_1
    },

    level_2 () {
      return this.$store.state.menu.menu_level_2
    }
  },

  mounted () {
    this.$store.dispatch('menu/get_menu')
  },

  methods : {
    goTo (url) {
      window.location = BASE_URL + '/one-ui/' + url
    }
  }
}
</script>