- starting add Categories

- improved layout drawer

src/components/Header.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+
         <q-layout-header>
             <q-toolbar
                     color="primary"
@@ -40,10 +41,9 @@
 
         </q-layout-header>
 
-
         <q-layout-drawer side="left"
                          v-model="leftDrawerOpen"
-                         :content-class="['bg-grey-3', 'q-pa-sm']"
+                         :content-class="['bg-grey-1', 'q-pa-sm']"
                          :content-style="{padding: '0px'}"
         >
             <drawer></drawer>
@@ -60,6 +60,7 @@
   import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
 
   import { GlobalStore } from '@modules'
+  import { rescodes } from '../store/Modules/rescodes'
 
   @Component({
     components: {
@@ -78,12 +79,14 @@
       { label: 'Spanish', icon: 'fa-flag-es', value: 'es' },
       { label: 'Italian', icon: 'fa-facebook', value: 'it' }
     ]
-    get leftDrawerOpen () {
+
+    get leftDrawerOpen() {
       return GlobalStore.state.leftDrawerOpen
     }
-    set leftDrawerOpen (value) {
+
+    set leftDrawerOpen(value) {
       GlobalStore.state.leftDrawerOpen = value
-      localStorage.setItem('leftDrawerOpen', value.toString())
+      localStorage.setItem(rescodes.localStorage.leftDrawerOpen, value.toString())
     }
 
     get lang() {
@@ -111,17 +114,23 @@
 
 </script>
 
-<style>
+<style lang="scss">
     .layout-padding {
         padding: 1em 4em;
     }
 
+    .item-content {
+        font-size: 0.8rem;
+        font-weight: 350;
+    }
+
     @media screen and (max-width: 600px) {
         .layout-padding {
             padding: 1.5em .5em;
         }
     }
 
+    /*
     @-webkit-keyframes moveFromLeftFade {
         from {
             opacity: 0.3;
@@ -137,6 +146,21 @@
         }
     }
 
+    @-webkit-keyframes moveFromTopFade {
+        from {
+            opacity: 0.3;
+            -webkit-transform: translateY(0%);
+        }
+    }
+    @keyframes moveFromTopFade {
+        from {
+            opacity: 0.3;
+            -webkit-transform: translateY(0%);
+            transform: translateY(-50%);
+        }
+    }
+
+
     @-webkit-keyframes moveToRight {
         from {
         }
@@ -175,6 +199,25 @@
         }
     }
 
+    @-webkit-keyframes moveToBottom {
+        from {
+        }
+        to {
+            opacity: .5;
+            -webkit-transform: translateY(-100%);
+        }
+    }
+
+    @keyframes moveToBottom {
+        from {
+        }
+        to {
+            opacity: .5;
+            -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+        }
+    }
+
     @-webkit-keyframes moveFromRight {
         from {
             opacity: .7;
@@ -189,17 +232,18 @@
             transform: translateX(100%);
         }
     }
+    */
 
     .drawer-closer .item-content {
-        margin-left: 50px !important;
+        margin-left: 20px !important;
     }
 
     .drawer-content .list-label {
-        line-height: 45px;
+        line-height: 25px;
     }
 
     .drawer-content .item {
-        height: 45px;
+        height: 25px;
     }
 
     .router-link-active .item-primary {
@@ -280,7 +324,7 @@
     }
 
     .toolbar {
-        min-height: 40px;
+        min-height: 30px;
     }
 
     .right-itens a, .right-itens button {
@@ -299,4 +343,6 @@
     .fa-flag-it:before {
         content: url('../statics/icons/flag_it.svg');
     }
+
 </style>
+