Currently I have three elements in my layout, a header, a sidenav, and a yield.

What would be the best way to apply a transparent black overlay to everything but the sidenav when the sidenav is opened via a button? My current solution turns the brightness of the yield down to about 20%, and does something else to “dim” the header, but this seems like a very poor solution.

Ideally I’d like to apply a div to everything but the sidenav, and manipulate the overlay on that div. However, because the {{header}} and {[yield}} and {{sidenav}} are all separate elements in the layout, I’m not sure how to do this.

Any suggestions on the best way to apply an overlay to everything on the page except the sidenav?