Hide menus on mobile version

front/salix/components/layout/style.scss

@@ -46,7 +46,11 @@ vn-layout {
             justify-content: flex-end;
         }
         .show-menu {
-            margin-right: 5px
+            display: none;
+        }
+        & > .show-menu {
+            margin-right: 5px;
+            display: block
         }
         .vn-button {
             color: inherit;

front/salix/components/side-menu/side-menu.js

@@ -12,6 +12,7 @@ export default class SideMenu extends Component {
     constructor($element, $) {
         super($element, $);
         this.side = 'left';
+        this.mobileWidth = 800;
     }
 
     $onInit() {
@@ -27,10 +28,30 @@ export default class SideMenu extends Component {
             this.layout.element.classList.add('left-menu');
         }
 
-        const stateParts = this.$state.current.name.split('.');
-        if (stateParts[1] === 'card') this.show();
-
+        // Eliminar todos los eventos keydown para prevenir pulsar escape despues de minimizar y maximizar ventana
         this.stateHandler = this.$transitions.onStart({}, t => this.onTransition(t));
+
+        const resizeHandler = target => {
+            const stateParts = this.$state.current.name.split('.');
+            const handler = e => this.onEscape(e);
+            if (target.innerWidth <= this.mobileWidth) {
+                this.handler = handler;
+                this.$window.addEventListener('keydown', this.handler);
+
+                this.hide();
+            } else {
+                this.$window.removeEventListener('keydown', handler);
+                if (this.side == 'right' || stateParts[1] === 'card')
+                    this.show();
+            }
+        };
+
+        this.$window.addEventListener('resize', event => {
+            resizeHandler(event.target);
+            this.$.$digest();
+        });
+
+        resizeHandler(this.$window);
     }
 
     $onDestroy() {
@@ -46,6 +67,7 @@ export default class SideMenu extends Component {
     }
 
     onEscape(event) {
+        console.log('onEscape');
         if (!event.defaultPrevented && event.key == 'Escape') {
             this.hide();
             this.$.$digest();
@@ -71,8 +93,12 @@ export default class SideMenu extends Component {
     show() {
         if (this.shown) return;
         this.shown = true;
-        this.handler = e => this.onEscape(e);
-        this.$window.addEventListener('keydown', this.handler);
+
+        if (this.$window.innerWidth <= this.mobileWidth) {
+            this.handler = e => this.onEscape(e);
+            this.$window.addEventListener('keydown', this.handler);
+        }
+
         this.stateHandler = this.$transitions.onStart({}, t => this.onTransition(t));
         this.layout.element.classList.add('shown');
     }

front/salix/components/side-menu/style.scss

@@ -18,9 +18,11 @@ vn-side-menu > .menu {
 
     &.left {
         transform: translateZ(0) translateX(-$menu-width);
+        left: 0
     }
     &.right {
         transform: translateZ(0) translateX($menu-width);
+        right: 0
     }
 
     &.shown {