Angular Material Not Locked sidebar

Question

I've a sidebar like this:

Button 1 Button 2 This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.

This is the content area!

Current Behaviour - when i remote the md-is-locked-open attribute and start to show the sidebar if the user clicks a button, then the side bar is fullscreen and not inside the content area.

So it differs in the following points form the locked version:

• Its over the toolbar
• It grays ot the main content
• its over the content area

Required Behaviour - what do i have to change to have it inside the content area? So it looks exactly the sameway like it is when its locked .

• It should be unter the toolbar
• Should not overlap main content (just move it to the right=
• Should not gray out other content

Codepen Here

Answer 1

Just change the:

<div layout="row" flex>

above the sidenav for:

<md-content layout="row" flex>

and the corresponding closing tag. And that's it!

The md-toolbar must be sibling to an md-content to get the behaviour you are looking for.

EDIT

For your further requirements please check this Codepen I've made. It does exactly what you want (override the sidenav behaviour to hide the overlay and push the contents to the right): http://codepen.io/anon/pen/pjXYMa