(js) Allow hiding the sidenav on large screens

Position of button is not final as it causes an issue with the tabs of
the Calendar module.

UI/WebServerResources/js/Common/navController.js

@@ -15,6 +15,7 @@
     $scope.isPopup = sgSettings.isPopup;
     $scope.activeUser = sgSettings.activeUser();
     $scope.baseURL = sgSettings.baseURL();
+    $scope.leftIsClose = false;
 
     // Show current day in top bar
     $scope.currentDay = window.currentDay;
@@ -27,16 +28,17 @@
       }, 24 * 3600 * 1000);
     }, window.currentDay.secondsBeforeTomorrow * 1000);
 
-    $scope.toggleLeft = function () {
+    $scope.toggleLeft = function() {
+      $scope.leftIsClose = leftIsClose();
       $mdSidenav('left').toggle()
         .then(function () {
           $log.debug("toggle left is done");
         });
     };
-    $scope.toggleRight = function () {
+    $scope.toggleRight = function() {
       $mdSidenav('right').toggle()
         .then(function () {
-          $log.debug("toggle RIGHT is done");
+          $log.debug("toggle right is done");
         });
     };
     // $scope.openBottomSheet = function() {
@@ -53,8 +55,15 @@
       return $mdMedia(sgConstant['gt-md']);
     }, function(newVal) {
       $scope.isGtMedium = newVal;
+      if (newVal) {
+        $scope.leftIsClose = false;
+      }
     });
 
+    function leftIsClose() {
+      return !$mdSidenav('left').isOpen();
+    }
+
     Alarm.getAlarms();
   }
 

UI/WebServerResources/scss/components/sidenav/sidenav.scss

@@ -7,9 +7,14 @@ $sidenav-min-space: $pitch;
 md-sidenav {
   &.md-locked-open {
     @include from(lg) {
-      @include flex-col(lg, 4, 1, 0)
+      @include flex-col(lg, 4, 1, 0);
+      // Custom representation of a closed sidenav where the sidenav is pushed to the left;
+      // Used in in "locked open" mode.
+      &.sg-closed.md-sidenav-left {
+        transform: translateX(-100%);
+        margin-right: -20vw; // See views/_views.scss
+      }
     }
-
   }
 }
 

UI/WebServerResources/scss/views/_view.scss

@@ -79,7 +79,7 @@ $detailView-width: grid-step(8) !global;
     margin: 0;
   }
   @include from(lg) {
-    @include flex-col(lg, 10, 2, 1);
+    flex: 1 1 auto;
     margin: 0;
   }