Disable interactions in ion-side-menu-content when side menu is open?

ionic-v1
1

I’ve noticed that users are trying to swipe the side menu (ion-side-menu) closed and end up actually triggering actions in the main frame (ion-side-menu-content). Does anyone have a suggestion as to how I could go about programmatically disabling interaction in a frame? Seems like there would be some kind of Ionic directive, but I can’t seem to find it. Thanks!

2

Hm, interesting… I thought we put in something to make it some any interaction with the ion-content directive would close the side-menu…

But I tried this with a swipe list and side menu and got the same results. Good catch!

Opening an issue for it right now.

1 Like
3

That’s awesome – I love how responsive you guys are. Thanks!

4

Thats our jobs :smile:

1 Like
5

For what it’s worth, here was my solution in case anyone else ends up looking for it. Works fairly well – will probably add an animation to have the light grey cover fade away smoothly. Hoping to add swipe gestures to close the side menu next :smile:

A custom directive with the following:

.directive('disableScreen', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.$watch(
        function() {
          return scope.sideMenuContentTranslateX;
        }, function(translateVal) {
        if(Math.abs(translateVal) === 275) {
          !element.hasClass('display') && element.addClass('display');
        } else {
          element.hasClass('display') && element.removeClass('display');
        }
      });
    }
  };
})

A template that looked like this:

<ion-side-menus>
  
  <!-- CENTER CONTENT -->
  <ion-pane transition-check ion-side-menu-content drag-content="false">
    <disable-screen class="cover"></disable-screen>
    <ion-nav-view name="main"></ion-nav-view>
  </ion-pane>

  <!-- LEFT SIDE MENU -->
  <ion-side-menu side="left">
    <ion-nav-view name="left"></ion-nav-view>
  </ion-side-menu>

  <!-- RIGHT SIDE MENU -->
  <ion-side-menu side="right">
    <ion-nav-view name="right"></ion-nav-view>
  </ion-side-menu>

</ion-side-menus>

Two CSS classes, display and cover:

.cover {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 9999;
  background-color: rgba(0,0,0,0.3);
}

.cover.display {
  display: block;
}
1 Like
6

Thanks ianlyons, working fine for me.