2423 - Hide left menu

front/salix/components/layout/index.html

@@ -3,7 +3,7 @@
         icon="menu"
         class="show-menu"
         ng-if="$ctrl.leftMenu"
-        ng-click="$ctrl.leftMenu.show()">
+        ng-click="$ctrl.leftMenu.toggle()">
     </vn-icon-button>
     <div class="side start">
         <a class="logo" ui-sref="home" title="{{'Home' | translate}}">

front/salix/components/layout/style.scss

@@ -46,7 +46,7 @@ vn-layout {
             justify-content: flex-end;
         }
         .show-menu {
-            display: none;
+            margin-right: 5px
         }
         .vn-button {
             color: inherit;
@@ -68,7 +68,7 @@ vn-layout {
         & > vn-topbar > .start {
             width: 80px + $menu-width;
         }
-        & > .main-view {
+        &.shown > .main-view {
             padding-left: $menu-width;
         }
     }
@@ -85,6 +85,8 @@ vn-layout {
     }
     & > .main-view {
         padding-top: $topbar-height;
+
+        transition: padding-left 200ms ease-out;
     }
     ui-view {
         & > * {
@@ -134,7 +136,8 @@ vn-layout {
             & > vn-topbar {
                 left: 0;
             }
-            & > .main-view {
+            & > .main-view,
+            &.shown > .main-view  {
                 padding-left: 0;
             }
         }

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

@@ -26,6 +26,11 @@ export default class SideMenu extends Component {
             this.layout.leftMenu = this;
             this.layout.element.classList.add('left-menu');
         }
+
+        const stateParts = this.$state.current.name.split('.');
+        if (stateParts[1] === 'card') this.show();
+
+        this.stateHandler = this.$transitions.onStart({}, t => this.onTransition(t));
     }
 
     $onDestroy() {
@@ -48,8 +53,19 @@ export default class SideMenu extends Component {
     }
 
     onTransition(transition) {
-        if (transition.from().name !== transition.to().name)
+        const stateParts = transition.to().name.split('.');
-            this.hide();
+
+        if (transition.from().name !== transition.to().name) {
+            if (stateParts[1] === 'card')
+                this.show();
+            else
+                this.hide();
+        }
+    }
+
+    toggle() {
+        if (this.shown) this.hide();
+        else this.show();
     }
 
     show() {
@@ -58,6 +74,7 @@ export default class SideMenu extends Component {
         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');
     }
 
     hide() {
@@ -65,6 +82,7 @@ export default class SideMenu extends Component {
         this.$window.removeEventListener('keydown', this.handler);
         this.stateHandler();
         this.shown = false;
+        this.layout.element.classList.remove('shown');
     }
 }
 

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

@@ -14,28 +14,29 @@ vn-side-menu > .menu {
     box-shadow: 0 1px 3px $color-shadow;
     overflow: auto;
     top: $topbar-height;
+    transition: transform 200ms ease-out;
 
     &.left {
-        left: 0;
+        transform: translateZ(0) translateX(-$menu-width);
     }
     &.right {
-        right: 0;
+        transform: translateZ(0) translateX($menu-width);
+    }
+
+    &.shown {
+        transform: translateZ(0) translateX(0);
     }
 
     @media screen and (max-width: $mobile-width) {
-        transition: transform 200ms ease-out;
         z-index: 15;
         top: 0;
 
         &.left {
-            transform: translateZ(0) translateX(-$menu-width);
+            transform: 0;
         }
         &.right {
             top: 0;
-            transform: translateZ(0) translateX($menu-width);
+            transform: 0;
-        }
-        &.shown {
-            transform: translateZ(0) translateX(0);
         }
     }
 }