I am currently working on an Angular 2 Material application that incorporates the <md-sidenav-layout> with an <md-toolbar> nested inside.
<md-sidenav-layout>
<md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
sidenav content
</md-sidenav>
<md-toolbar color="primary" class="toolbar">
toolbar content
</md-toolbar>
</md-sidenav-layout>
The current layout appears as depicted in this image:
https://i.sstatic.net/qP3BB.png
My objective is to ensure the toolbar remains fixed at the top, unaffected by scrolling. This consistency with the sidenav and its title is crucial. However, my attempts so far have been unsuccessful.
https://i.sstatic.net/xjuUz.png
Initially, I considered using position: fixed; top: 0 to achieve this, but it did not yield the desired result:
/* Doesn't work */
.toolbar {
position: fixed;
top: 0;
}
Based on information from MDN: position and this Stack Overflow post regarding position: fixed, it appears that it may not function properly when the parent element utilizes a transform. The md-sidenav-layout likely employs this for transitions when toggling the sidenav. Testing position: fixed; top: 0 on a standalone page provided the expected outcome.
While removing the toolbar from the md-sidenav-layout context could be an option, doing so would compromise the animation and transition effects that ensure visual coherence between the toolbar and sidenav during toggling.
https://i.sstatic.net/iGWHB.png
As my expertise in CSS is limited, I welcome any suggestions or workarounds to resolve this issue and achieve the desired effect.
For reference, here is the Plunker.