Feature(MdSidenav): add scroll block strategy

[macjohnny]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

It should be possible to have a sidenav that spans across the visible viewport, i.e. 100vw and 100vh and blocks scrolling. The content of the sidenav should scroll instead of the body content.
See also #4500

What is the current behavior?

The sidenav backdrop expands with the containing content and still allows the user scroll.

What are the steps to reproduce?

How it is now:
http://embed.plnkr.co/zlg13xd1ukSDUa16aNqE/

How it should be:

What is the use-case or motivation for changing an existing behavior?

When using the sidenav as a navigation,

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular4, Material 2.0.0-beta.5

Is there anything else we should know?

An easy solution can be achieved with the following template / scss:

<md-sidenav-container>

  <md-sidenav mode="over">
    some sidenav content
  </md-sidenav>

  <div class="placeholder" *ngIf="isOpened()"></div>

</md-sidenav-container>

:host {
  /deep/ md-sidenav-container{
    background: none;
    position: fixed;
    z-index: 100000;
    top: 0;
  }
}

// the placeholder expands the content of the sidenav to the screen width
// in order for the backdrop to span across the screen and to prevent the
// sidenav being clipped
.placeholder{
  width: 100vw;
  height: 100vh;
}

To be used in combination with the newly developed #4500 scroll block strategy.

[gtranter]

Not to be dismissive or critical, but isn't this idea in violation of Material Design specs for navigation drawers?

Side nav width: Equal to the screen width minus the height of the action bar. In the example shown above, the nav drawer is 56dp from the right edge of the screen.

Maximum width: The maximum width of the nav drawer is 280dp on mobile and 320dp on tablet. This is calculated by multiplying the standard increment by five (the standard increment is 56dp on mobile and 64dp on tablet).

I believe the reason for not allowing full view width is to be able to cancel/dismiss the sidenav by clicking outside it, since a full height sidenav in 'over' mode obscures the hamburger menu icon.

[macjohnny]

@gtranter „spanning across the visible viewport“ refers to the backdrop. The sidensv would no change in dimensions, but would simply be placed fixed in position and prevent the user from scroling the background

[gtranter]

@macjohnny Thanks for the clarification. I am already seeing this behavior in 2.0.0-beta.12 using mat-sidenav in 'over' mode. The only deficiency from the issue description that I can see is that the sidenav does not scroll when the mouse is over the backdrop - only when the mouse is over the sidenav. However, scrolling of the content area is blocked as desired.

[macjohnny]

@gtranter thanks for your response. I guess the feature is implemented then.

[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.}