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

@@ -48,6 +48,10 @@ vn-layout {
         .show-menu {
             display: none;
         }
+        & > .show-menu {
+            margin-right: 5px;
+            display: block
+        }
         .vn-button {
             color: inherit;
             font-size: 1.05rem;
@@ -71,6 +75,10 @@ vn-layout {
         & > .main-view {
             padding-left: $menu-width;
         }
+
+        &.shown > .main-view {
+            padding-left: 0;
+        }
     }
     &.right-menu {
         & > vn-topbar > .end {
@@ -85,6 +93,8 @@ vn-layout {
     }
     & > .main-view {
         padding-top: $topbar-height;
+
+        transition: padding-left 200ms ease-out;
     }
     ui-view {
         & > * {
@@ -134,7 +144,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

@@ -52,12 +52,18 @@ export default class SideMenu extends Component {
             this.hide();
     }
 
+    toggle() {
+        if (this.shown) this.hide();
+        else this.show();
+    }
+
     show() {
         if (this.shown) return;
         this.shown = true;
         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 +71,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,16 +14,20 @@ vn-side-menu > .menu {
     box-shadow: 0 1px 3px $color-shadow;
     overflow: auto;
     top: $topbar-height;
+    transition: transform 200ms ease-out;
 
     &.left {
-        left: 0;
+        left: 0
     }
     &.right {
         right: 0;
     }
 
+    &.shown {
+        transform: translateZ(0) translateX(-$menu-width);
+    }
+
     @media screen and (max-width: $mobile-width) {
-        transition: transform 200ms ease-out;
         z-index: 15;
         top: 0;