Allow for side menu to be "hidden"

[lokkilok]

Some native components may require the Ionic application to have a transparent area, notably the Google Maps plugin. The ionic (left) side menu however is always there "under" the side-menu-content. Opening the menu simply (and elegantly!) works by translating (moving) the content element sideways.
Would it be possible to include an option that allows the side menu to be "hidden", i.e. for it to take up no space in the document layout at all, whenever it is closed ?

A solution might be to set the style.visibility to "hidden" when the menu is closed and to set it back to "visible" right before it is opened. All of this could be under control of a new attribute (option) on the ion-side-menu directive, e.g. "hide-when-closed='true'".

[drewrygh]

Can this be accomplished with ng-hide, and toggling the expression when opened?

[lokkilok]

Hmm, I'm about as new to angular as to ionic, but had a look at ng-hide. Perhaps it can be made to work, but upon a first try I could not achieve that. Probably because I am of the opinion that ionic is responsible for how the side menu works, so it should also be responsible for hiding it, when that is needed/asked for. So the $ionicSideMenus controller should do the toggling, as it knows when to hide/unhide the menu. However I suspect that the scope that can be manipulated by this controller is not available to the directives that are set on the ion-side-menu element. That element is assigned a controller for which the user-developer writes the code, e.g.:

<ion-side-menu side="left" ng-controller="RobertsMenuCtrl" ng-hide="{{hideLeft}}">

It's easy enough to add lines like $scope.hideLeft = true to the sideMenuController.js, but that sideMenuController scope is not in the scope tree of "RobertsMenuCtrl".
But then again, I can't claim to be an angular wizard so perhaps it should be done differently. My main point though remains that the ionic framework should do this hiding, one way or another.
Did you see my pull request?

[drewrygh]

Well, you could define your controllers and scope wherever you'd like. ionicSideMenuDelegate can be selected from within any controller, so you can manipulate the sidemenus from controller A,B,C etc, or within a service.

The openRatio of the sidemenu is exposed through ionicSideMenuDelegate, which is the percentage of the menu that is currently open. You can $watch this value, and when it's at 0, you can toggle your hideLeft variable. This would look something like:

  $scope.$watch(function(){
    return $ionicSideMenuDelegate.getOpenRatio();
  }, function(newValue, oldValue) {
    if (newValue == 0){
      $scope.hideLeft = true;
    } else{
      $scope.hideLeft = false;
    }
  });

Not sure that it needs to be in the core if it can be accomplished without hacks. Let me know if this helps.

[lokkilok]

Thanks for the idea, that actually works!

This solution is I think good enough for now, as it is completely outside Ionic. Long term I think that Ionic could offer a built-in solution as framework-users should not have to deal too much with unexpected side effects (the lurking menu under the content) of a design decision (to only translate the content element). But for now it could be argued that a transparent child of ion-side-menu-content is an edge case, and that the above solution works for that case. Note that this edge case is fairly popular/frequent though; I added a reply to an appropriate message in http://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456

[alexbonhomme]

Hey,

Personally, I found an elegant solution (right menu) :

.menu.menu-right {
    transform: translate3d(100%, 0, 0) !important;
    -webkit-transition: transform 200ms ease;
    transition: transform 200ms ease;
}

.menu-open {
    .menu.menu-right {
        transform: translate3d(0, 0, 0) !important;
    }
}

[RicardoBer]

sass solution from blckshrk not work well with maps sdk plugin, javascript solution makes a terrible blinking in menú show.

I can't understand why show menú layer when menú is hidden, this must be solved in ionic kernel, when menu is hidden, hide it.

[alexbonhomme]

@RicardoBer I agree with you, this isn't perfect with the Google Maps plugin.

I was in the same case and I applied the following solution (I mean, this is more a workaround) :

$scope.$watch(function () {
    return $ionicSideMenuDelegate.isOpen();
}, function (isOpen) {
    if (isOpen) {
        map.setVisible(false);
    } else {
        $timeout(function () {
            map.refreshLayout();
            map.setVisible(true);
        }, 200); // animation duration
    }
});

Hope this help !

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.