var onSideMenuChanged = function () {
var leftOpened = $ionicSideMenuDelegate.isOpenLeft();
var rightOpened = $ionicSideMenuDelegate.isOpenRight();
var stats = {
left : leftOpened,
right: rightOpened
};
var openedMenu = 'none';
if ( leftOpend && rightOpened ) {
openedMenu = 'both';
} else if ( leftOpened ) {
openedMenu = 'left';
} else if ( rightOpened ) {
openedMenu = 'right';
}
$rootScope.openedMenu = openedMenu;
};
$rootScope.$watch( function () {
//We multiply right by 2 to trigger a change. Right and left both give 1, so if we switch it is still one and no change is made. By multiplying by 2, we force an integer differenc.
return $ionicSideMenuDelegate.isOpenLeft() + ($ionicSideMenuDelegate.isOpenRight() * 2); //0 = none, 1 = left, right = 2
}, function () {
onSideMenuChanged();
} );
I’ve used this for my project, might work for you as well
You might want to change something about it, but basically you could apply the $rootScope.openedmenu anywhere in your html, most logically as a class and bind some css to that class
I’ve used a custom attrbiute data-cust-ion-menu-opened="$root.openedMenu" on my body element.