(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/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -20,7 +20,9 @@
   <script type="text/ng-template" id="UIxContactFoldersView">
 
     <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
+    <md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column"
+                md-component-id="left" md-is-locked-open="isGtMedium"
+                ng-class="{ 'sg-closed': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
       <!-- <div style="position: relative; display: flex;"> -->
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
@@ -352,12 +354,18 @@
 
         <md-content id="contactsList" layout="column" class="md-flex">
           <md-subheader ng-show="addressbook.service.$query.value">
+            <md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
+              <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
+            </md-button>
             <span ng-switch="addressbook.selectedFolder.cards.length">
               <span ng-switch-when="0"><var:string label:value="No matching contact"/></span>
               <span ng-switch-default="true">{{addressbook.selectedFolder.cards.length}} <var:string label:value="matching contacts"/></span>
             </span>
           </md-subheader>
           <md-subheader ng-hide="addressbook.service.$query.value">
+            <md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
+              <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
+            </md-button>
             <span ng-switch="addressbook.selectedFolder.isRemote">
               <span ng-switch-when="1">
                 <var:string label:value="Start a search to browse this address book"/>

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -202,6 +202,9 @@
 
     <md-content id="messagesList" layout="column" class="md-flex">
       <md-subheader>
+        <md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
+          <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
+        </md-button>
         <span ng-switch="mailbox.service.selectedFolder.getLength()">
           <span ng-switch-when="0"><var:string label:value="No message"/></span>
           <span ng-switch-default="true">{{mailbox.service.selectedFolder.getLength()}} <var:string label:value="messages"/></span>

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -226,7 +226,9 @@
   <script type="text/ng-template" id="UIxMailMainFrame">
 
     <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
+    <md-sidenav class="md-sidenav-left md-whiteframe-z1 layout-fill" layout="column"
+                md-component-id="left" md-is-locked-open="isGtMedium"
+                ng-class="{ 'sg-closed': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <section ng-repeat="account in app.accounts track by account.id">

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;
   }