I'm looking for a solution to display a MatSidenav over a MatDialog. My project, mobile first, is built with two sidenavs, left and right, which push the content.
At the bottom, there is a fixed footer which can open the left or right sidenav.
In the main content, I need to use MatDialog.
My purpose is to be able to have a MatDialog opened, and to be able to open the left sidenav, because I want to check something about my account for instance, and then, close it to come back to the dialog, still opened.
Right now, the dialog is always displayed over the content.
Here is a Stackblitz to clearly explain my problem:
To reproduce the case:
- Click on the button "Pick one"
- The dialog opens
- In the footer, click on "Open left menu"
- The left sidenav pushes the main content but is displayed below the dialog
Everything works like I want except the Z position of the MatDialog and its associate overlay, and the best thing would be to "push" it the same way this is done with the main content.
The ideal thing would be to find a way to "attach" the dialog and its overlay to the main content. I found a way to do it with Angular 4.4 but with the newer versions like Angular 8, this seems not to work.
