fix(sidenav): animate content resizing for side mode.

[devversion]

• Animates the margin-left and margin-right for the sidenav-content because otherwise when using mode="side" the sidenav content will just jump and not animate as same as the push mode.

[jelbourn]

cc @mmalerba

@devversion we had this before and it was super janky on mobile.

[devversion]

@jelbourn Hm, on the other hand just letting the content jump would probably also feel janky on all platforms

[mmalerba]

https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior
The spec says that persistent drawers (equivalent of our "side" mode) should only be used on larger devices and that mobile should use temporary drawers (equivalent of our "over" mode).

I vote for adding the animation and adding a note to our docs that in addition to being the recommendation of the spec, we also suggest that they only use "over" or "push" on mobile devices for performance reasons

[devversion]

@mmalerba I think that is a great idea. Do you want to me to include it into the OVERVIEW.md file?

[mmalerba]

yeah, sounds good

[devversion]

@mmalerba Just added the info to the overview file.

[mmalerba]

@jelbourn is this ok with you?

[devversion]

Ping @jelbourn for review.

[willshowell]

I'm looking forward to this PR landing. Is there any progress on unblocking it?

[mmalerba]

jeremy told me he wanted to test this on mobile, I just did and it looks fine to me. and again ideally people should use over or push on mobile.

[devversion]

@mmalerba Thanks for testing it on mobile.

[andrewseguin]

Sidenavs that initialize with opened are showing the content transition in. Using #3043 to track the issue

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}