freeplanet/src/layouts/drawer/menuOne.vue

<template>
    <div class="list no-border platform-delimiter light-paragraph">
        <q-icon name="action"/>
        <template v-for="(parent, index) in links">
            <!--
            <div class="list-label cursor-pointer" @click="parent.show = !parent.show">
                {{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
            </div>
            -->
            <div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
            <template v-for="child in parent.routes">
                <div v-if="child.routes2">
                    <q-expansion-item menu :label="$t(child.name)" icon="format_list_bulleted" class="titleSubMenu">
                        <div v-for="child2 in child.routes2">
                            <q-item link :to="child2.route" exact
                                    class="item item-link drawer-closer cursor-pointer">
                                <i :class="child2.faIcon" class="item-primary"></i>
                                <div class="item-content">{{$t(child2.name)}}</div>
                            </q-item>
                        </div>
                    </q-expansion-item>
                </div>
                <div v-else>
                    <q-slide-transition :duration=200>
                        <div v-show="true">
                            <q-item link :to="child.route" exact
                                    class="item item-link drawer-closer cursor-pointer">
                                <i :class="child.faIcon" class="item-primary"></i>
                                <div class="item-content">{{$t(child.name)}}</div>
                            </q-item>
                        </div>
                    </q-slide-transition>
                </div>
            </template>
        </template>
    </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import { Prop, Watch } from "vue-property-decorator"

  export default class menuOne extends Vue {
    @Prop({ required: true }) links

    @Watch('$route.path')
    modifroute() {
      Object.keys(this.links).forEach(parentName => {
        this.setParentVisibilityBasedOnRoute(this.links[parentName])
      })
    }

    get currentRoutePath() {
      return this.$route.path
    }

    created() {
      console.log("MENUONE CREATED!")
    }

    setParentVisibilityBasedOnRoute(parent) {
      parent.routes.forEach(item => {
        if (this.$route.path === item.route) {
          parent.show = true
          return
        }
      })
    }

    replaceUnderlineToSpace(text) {
      while (text.indexOf('_') !== -1) {
        text = text.replace('_', ' ')
      }
      return text
    }
  }
</script>
<style scoped>

    .q-list-header {
        min-height: 12px;
        padding: 5px 8px;
    }

    .menu-hr {
        border-color: #dedede;
        height: 0.5px;
    }

    .router-link-active {
        color: #027be3;
        background-color: #dadada !important;
        border-right: 2px solid #027be3;
    }

    .list-label:first-child {
        line-height: 20px;
        padding: 5px;
        margin: 1px;
    }

    /*
    .menu-enter-active, .scale-enter {
        -webkit-animation: moveFromTopFade .5s ease both;
        animation: moveFromTopFade .5s ease both;
    }

    .menu-leave-to, .scale-leave-active {
        -webkit-animation: moveToBottom .5s ease both;
        animation: moveToBottom .5s ease both;
    }
    */

    .router-link-active {
        color: #027be3;
        background-color: #dadada !important;
        border-right: 2px solid #027be3;
    }

    .router-link-active .item-primary {
        color: #027be3;
    }

    .menu_freccina {
        position: absolute;
        right: 10px;
        display: inline-block;
        padding: 0 0px 0px 0px;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

</style>