SideBar Navigation and content masks

[ThomasBurleson]

When Side Navigation components are shown an accompanying edge-shadow is displayed. And a transparent mask is used (underneath) the SideNav to detect mouse clicks on areas off the SideNav. These clicks are used to auto-close the SideNav.

Since the mask element is not visible (currently), clicks on the content items are intercepted by the mask and mislead the user experience.

Question(s):

• Should an semi-opaque mask be shown to the user?
• What opacity and color should be the default vlaues ?
• The mask usage should be optional under what conditions ?
• The mask usage should be required under what conditions ?

[ThomasBurleson]

Default to mask dialog similar to Dialog. see spec for opacity and color.

[Nowis]

It seems the mask is always present when using sidenavs (or I didn't find the right option?).
It is kinda odd to see a mask when using a desktop application, sidenavs shouldn't work same as dialog on desktop and should by default be not used unless the media is 'sm'.

[ajoslin]

@Nowis I agree that the sidenav's backdrop shouldn't be faded on desktop.

However, I also don't want a magical CSS rule that applies on desktop, I want consistency in the framework.

And since I can't think of a good API to hide this with an attribute, I'm going to encourage you to use CSS:

@media (min-width: 960px) {
  md-backdrop.md-opaque.md-sidenav-backdrop {
    background-color: transparent;
  }
}