- (Part 2 - Upgrade Components Quasar)

src/layouts/menuone/menuOne.scss

@@ -0,0 +1,52 @@
+.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);
+}

src/layouts/menuone/menuOne.ts

@@ -0,0 +1,38 @@
+import Vue from 'vue'
+import { Watch } from 'vue-property-decorator'
+import { GlobalStore } from '../../store/Modules'
+
+export default class MenuOne extends Vue {
+
+  @Watch('$route.path')
+  private modifroute() {
+    Object.keys(this.getmenu).forEach((parentName) => {
+      this.setParentVisibilityBasedOnRoute(this.getmenu[parentName])
+    })
+  }
+
+  // get currentRoutePath() {
+  //   return this.$route.path
+  // }
+
+  get getmenu() {
+    return GlobalStore.getters.getmenu
+  }
+
+  public setParentVisibilityBasedOnRoute(parent) {
+    parent.routes.forEach((item) => {
+      if (this.$route.path === item.route) {
+        parent.show = true
+        return
+      }
+    })
+  }
+
+  public replaceUnderlineToSpace(text) {
+    while (text.indexOf('_') !== -1) {
+      text = text.replace('_', ' ')
+    }
+    return text
+  }
+
+}

src/layouts/menuone/menuOne.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="list no-border platform-delimiter light-paragraph">
+        <q-icon name="action"/>
+
+        <q-list bordered class="rounded-borders text-primary">
+            <template v-for="(parent, index) in getmenu">
+                <div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
+                <div v-for="item in parent.routes">
+                    <div v-if="item.routes2">
+                        <q-expansion-item
+                                :header-inset-level="1"
+                                :content-inset-level="1"
+                                :label="$t(item.name)"
+                                :icon="item.materialIcon"
+                                class="titleSubMenu"
+                        >
+
+                            <q-expansion-item v-for="(child2, index) in item.routes2" :to="child2.route" :key="index"
+                                              :header-inset-level="1.1"
+                                              :duration="300"
+                                              expand-icon="map"
+                                              :active="child2.label === 'Outbox'"
+                                              class="item item-link drawer-closer cursor-pointer"
+                                              :label="$t(child2.name)">
+                            </q-expansion-item>
+
+                        </q-expansion-item>
+                    </div>
+                    <div v-else>
+                        <q-slide-transition :duration=200>
+                            <div v-show="true">
+                                <q-item
+                                        clickable
+                                        v-ripple
+                                        exact
+                                        :to="item.route"
+                                        active-class="my-menu-link">
+                                    <q-item-section avatar>
+                                        <q-icon :name="item.materialIcon"/>
+                                    </q-item-section>
+
+                                    <q-item-section>
+                                        {{$t(item.name)}}
+                                    </q-item-section>
+                                </q-item>
+
+                            </div>
+                        </q-slide-transition>
+                    </div>
+                </div>
+            </template>
+        </q-list>
+    </div>
+</template>
+
+<script lang="ts" src="./menuOne.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './menuOne.scss';
+</style>
+