- starting add Categories

- improved layout drawer

src/layouts/drawer/drawer.vue

@@ -19,6 +19,10 @@
 
         <menu-one :links="links"></menu-one>
 
+        <!--<footer>
+            <small>- Small</small>
+        </footer>-->
+
         <div class="fixed-bottom text-center light text-italic">
             Powered by Perseo
         </div>
@@ -31,8 +35,8 @@
 
   import Vue from 'vue'
   import { Component, Watch, Prop } from 'vue-property-decorator'
-  import {Store} from 'vuex'
-  import { UserStore } from '@modules';
+  import { Store } from 'vuex'
+  import { UserStore } from '@modules'
   import { GlobalStore } from '@modules'
 
 
@@ -43,9 +47,9 @@
   })
   export default class Drawer extends Vue {
     public $q
-    $t: any;
+    $t: any
 
-    created () {
+    created() {
       console.log('Drawer created...')
     }
 
@@ -54,34 +58,36 @@
     links = {
       Dashboard: {
         routes: [
-          {route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home'},
-          {route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'pages.SignUp'},
-          {route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.SignIn'},
+          { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
+          { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
+          { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
+          { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
           /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
-          ],
+        ],
         show: true
       },
       Forms: {
         routes: [
-          {route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test'},
-          ],
+          { route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test' },
+        ],
         show: false
       },
     }
 
-    get MenuCollapse () {
+    get MenuCollapse() {
       return GlobalStore.state.menuCollapse
       // return true
     }
-    get Username () {
+
+    get Username() {
       return UserStore.state.username
     }
 
-    get Verificato () {
+    get Verificato() {
       return UserStore.state.verifiedEmail
     }
 
-    get Email () {
+    get Email() {
       return UserStore.state.email
     }
 
@@ -91,8 +97,8 @@
     }
   }
 </script>
-<style scoped>
-    .background-red{
+<style scoped lang="scss">
+    .background-red {
         background-color: red;
         padding: 2px;
     }
@@ -132,4 +138,10 @@
     #menu-collapse {
         margin-top: 5%;
     }
+
+    footer {
+        small {
+            color: red;
+        }
+    }
 </style>

src/layouts/drawer/menuOne.vue

@@ -1,23 +1,24 @@
 <template>
+
     <div class="list no-border platform-delimiter light-paragraph">
         <q-icon name="action"/>
         <template v-for="(parent, index) in links">
             <q-list>
                 <div class="list-label cursor-pointer" @click="parent.show = !parent.show">
-                    {{replaceUnderlineToSpace(index)}}
+                    {{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
                 </div>
                 <template v-for="child in parent.routes">
-                    <transition name="menu">
+                    <q-slide-transition duration="200">
                         <div v-show="parent.show">
-                                <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>
+                            <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>
-                    </transition>
+                    </q-slide-transition>
                 </template>
             </q-list>
-            <hr>
         </template>
     </div>
 </template>
@@ -60,6 +61,11 @@
 </script>
 <style scoped>
 
+    .menu-hr{
+        border-color: #dedede;
+        height: 0.5px;
+    }
+
     .router-link-active {
         color: #027be3;
         background-color: #dadada !important;
@@ -68,19 +74,21 @@
 
     .list-label:first-child {
         line-height: 20px;
-        padding:5px;
-        margin:1px;
+        padding: 5px;
+        margin: 1px;
     }
 
+    /*
     .menu-enter-active, .scale-enter {
-        -webkit-animation: moveFromLeftFade .2s ease both;
-        animation: moveFromLeftFade .2s ease both;
+        -webkit-animation: moveFromTopFade .5s ease both;
+        animation: moveFromTopFade .5s ease both;
     }
 
     .menu-leave-to, .scale-leave-active {
-        -webkit-animation: moveToLeft .2s ease both;
-        animation: moveToLeft .2s ease both;
+        -webkit-animation: moveToBottom .5s ease both;
+        animation: moveToBottom .5s ease both;
     }
+    */
 
     .router-link-active {
         color: #027be3;
@@ -91,4 +99,14 @@
     .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>