- starting add Categories

- improved layout drawer

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>