SideNav: push-in instead of slideIn overlay.

[cmoiccool]

Is there a way for md-sidenav to open without overlaying main content?

I am trying to reproduce the scenario for right Side Nav on desktop described in the material design guidelines here : http://www.google.com/design/spec/layout/structure.html#structure-side-nav

Is there a way to open an md-sidenav and not overlap the main content? I searched for some md-sidenav-someoption css to achieve this with no luck, maybe another one does the trick?

I am using v0.8.3

Thanks for your help!

[cdonohue]

I'm exploring options with this. Right now, you could set the md-is-locked-open property to something other than a media query and toggle it after injecting your detail content

<div layout="column" role="main" flex class="master-view">
    <md-toolbar>...</md-toolbar>
    <md-content ui-view md-scroll-y flex></md-content>
</div>
<md-sidenav class="md-sidenav-right md-whiteframe-z2 detail-view" md-is-locked-open="isDetailOpen">...</md-sidenav>

Does that help?

[cmoiccool]

@cdonohue Using a property to toggle md-is-locked-open instead of $mdSidenav('right').open(); did help! This way the sidenav opens and resizes the md-content successfully.

Now I am trying to do the same thing but with the md-toolbar also resized and with an independent one for the right Side Nav.

[anant-singh]

While that does it, there is no transitioning when you toggle using md-is-locked-open. You'll have to a custom transition for that event I guess.

[dohomi]

I'm not sure if you guys are talking about the same issue I have at the moment: on md-is-locked-openbehaviour is different than the toggle one on smaller screen sizes. On smaller screen size it seems that mdSidenavis connected to the bodywhile on md-is-locked-open state the navigation is aligned on the position inside of the code. It might be helpful if there would be an option to define the parentfor the locked open state.

[FDIM]

For whoever is looking for this feature can take a look at my codepen: http://codepen.io/anon/pen/qdymaB

Drop in directive:

// suplement sidenav behavior
    module.directive('sidenavPushIn', function () {
        return {
            restrict: 'A',
            require: '^mdSidenav',
            link: function ($scope, element, attr, sidenavCtrl) {
                var body = angular.element(document.body);
                body.addClass('md-sidenav-push-in');
                var cssClass = (element.hasClass('md-sidenav-left') ? 'md-sidenav-left' : 'md-sidenav-right') + '-open';
                var stateChanged = function (state) {
                    body[state ? 'addClass' : 'removeClass'](cssClass);
                };
                // overvwrite default functions and forward current state to custom function
                angular.forEach(['open', 'close', 'toggle'], function (fn) {
                    var org = sidenavCtrl[fn];
                    sidenavCtrl[fn] = function () {
                        var res = org.apply(sidenavCtrl, arguments);
                        stateChanged(sidenavCtrl.isOpen());
                        return res;
                    };
                });
            }
        };
    });

LESS styles:

.md-sidenav-push-in {
    // drawers
    .md-sidenav-push-in-target {
        transform: translate(0px);
        // same as in md-sidenav.md-closed-add.md-closed-add-active, md-sidenav.md-closed-remove.md-closed-remove-active selector
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    &.md-sidenav-left-open {
        .md-sidenav-push-in-target {
            transform: translate(304px);
        }
    }
    &.md-sidenav-right-open {
        .md-sidenav-push-in-target {
            transform: translate(-304px);
        }
    }
}

To make use of this: simply add sidenav-push-in attribute to your md-sidenav and add css class 'md-sidenav-push-in-target' to your content element. I firmly believe that this can be integrated to core fairly easily.