Menu-toggle only works for left menu?


#1

My app has a left side menu and a right side menu. in my view, I can toggle the left menu with a left nav button:

<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>

However, I can’t make the right menu work by this:

<ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-gear-b"></button>
</ion-nav-buttons>

it still toggle the left menu. Finally, I make it work by doing this:

<ion-nav-buttons side="right">
    <button class="button button-icon icon ion-gear-b" ng-click="toggleRight()"></button>
</ion-nav-buttons>

And:

$scope.toggleRight = function(){
    $ionicSideMenuDelegate.toggleRight();
};

Does any one has the same problem?


Toggle right side menu only effect left one
Toggle right side menu only effect left one
#2

Can you create a CodePen of your issue? And perhaps post it to GitHub issues


#3

i have the same problem yes. your solution is good but i think it should be done on the directive level out of ionic.


#4

Same here. Only works for left pane. Here is the codepen :wink:

Workaround is to toggle right pane manually


#5

Same issue … looks like a bug ?


#6

Hi, I checked the source code of the directive and found that it does a $scope.$eval() with the value of the menu-toggle attr.
So, what you should put there is an angular expression.

Either of:

<button menu-toggle="'left'" class="button button-icon icon ion-navicon"></button>

or

<button menu-toggle="'right'" class="button button-icon icon ion-navicon"></button>

#7

Thank you, ssassi.
So I think the document should be updated:
http://ionicframework.com/docs/api/directive/menuToggle/


#8

Thank you for this solution. I was slowly going insane trying to figure this out. :smile:


#9

This problem has been fixed in the nightly build version. now it can work fine like this:

        <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>

        <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon ion-gear-b"></button>
        </ion-nav-buttons>

in beta1, you need to do this:

menu-toggle="'right'"