Side Menu expose-aside-when on right Menu will not work

ionic-v1
1

Hey Guys,

am I doing something wrong?
I want to provide the right menu with the directive “expose-aside when” for any dialogue filter options.
The left menu is already using for navigation. When I insert the directive at the right menu affects those from the left and not the right menu. Any idea?

Codepen: http://codepen.io/anon/pen/bdEEZw

2

Same issue with that. set ‘expose-aside-when’ on right menu, but ion-panel shift wrong side. In my case, it only happened when I click a href with ‘menu-close’ attr. If remove that, it’s works fine.

3

Some Quick Hack - Feel free to fix or expand :wink:
Codepen: http://codepen.io/anon/pen/BNQPyN

angular.module('exposeRight').directive('asideExposeRight', function($window) {
    return {
        restrict: 'A',
        require: '^ionSideMenus',
        link: function($scope, $element, $attr, sideMenuCtrl) {

            function checkAsideExpose() {
                var mq = $attr.asideExposeRight == 'large' ? '(min-width:768px)' : $attr.asideExposeRight;

                var exposeRight = $window.matchMedia(mq).matches;
                var rightWidth  = $attr.width || sideMenuCtrl.right.width;
                $element.css({width : rightWidth.toString() + 'px'});
                var width = $window.innerWidth - (exposeRight ? rightWidth : 0);

                $element.parent().find('ion-side-menu-content').css({ width : width.toString() + 'px'});

                if (exposeRight) {
                    //** TODO: Disable any Nav-Buttons with menu-toggle="right"
                }
            }

            function onResize() {
                debouncedCheck();
            }

            var debouncedCheck = ionic.debounce(function () {
                $scope.$apply(checkAsideExpose);
            }, 300, false);

            $scope.$evalAsync(checkAsideExpose);

            ionic.on('resize', onResize, $window);
            $scope.$on('$destroy', function () {
                ionic.off('resize', onResize, $window);
            });
        }
    };
});
4

last but not least https://github.com/driftyco/ionic/pull/3845

5

Hey
I can’t figure out how to post a new topic so I am posting here.
I am having a problem with side menus. I have incorporated two side menus in my app. But The right menu is binding with the left one. The right menu has whatever functionality I want, but it also displays together with the left side menu when the left menu opens and the items in the right menu also bind with the function of the the corresponding left menu items.
Also, there is no problem when the app runs in browser, but causes a problem when run in the emulator.
Could someone please help?

Here is the code.

        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left" ng-controller="AppCtrl">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">

            </button>
        </ion-nav-buttons>



        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="right" ng-controller="RightMenu">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
            </button>
        </ion-nav-buttons>

    </ion-nav-bar>

    <ion-nav-view name="menuContent"></ion-nav-view>

</ion-side-menu-content>


<ion-side-menu side="right" ng-controller="RightMenu">
    <ion-header-bar class="bar-positive">
        <h1 class="title" style="font-family: Consolas; font-size: 20px">Menu</h1>
    </ion-header-bar>
    <ion-content>

        <ion-list>
            <ion-item menu-close href="#/app/Home" >
                NINJA
            </ion-item>

        </ion-list>
    </ion-content>
</ion-side-menu>



<ion-side-menu side="left" ng-controller="AppCtrl">
    <ion-header-bar class="bar-positive">
        <h1 class="title" style="font-family: Consolas; font-size: 20px">Browse</h1>
    </ion-header-bar>
    <ion-content>

        <ion-list>

            <ion-item menu-close href="#/app/search">
                Search
            </ion-item>
            <ion-item menu-close href="#/app/browse">
                Browse
            </ion-item>
            <ion-item menu-close href="#/app/Home">
                Home
            </ion-item>
                <ion-item menu-close ng-click="login()" >
                    Login
                </ion-item>


        </ion-list>
    </ion-content>
</ion-side-menu>

here are the screenshots
image

image

6

I am having a simular issue, but I am only using a right side menu, after I click on a menu item ionic tries to put the menu on the left,
Here is a sample codepen

7

try without menu-close attr and handle by your own

8

I forked an example I found online and made changes to have it activate / deactivate the right menu.

http://codepen.io/BradBurns/pen/GJWxxb

Hope that helps,
~ Brad

9

Thanks guys, that did the trick, I modified the code pen to work as I wanted, hope it helps someone else.