I attempted to create a fixed header, specifically a Toolbar, inside a LeftNav so that when the LeftNav is scrolled, the Toolbar remains in place. However, for some reason, setting position: 'fixed' on the Toolbar does not work within the LeftNav. When the content in the LeftNav exceeds the window height, the entire LeftNav, including the top Toolbar with a fixed position, scrolls along with it. Has anyone found a way to maintain a fixed position element within a LeftNav?
Below is the reference code:
...
const toolBarStyle = {
position: 'fixed',
top: 0,
};
return (
<LeftNav
open={open}
docked={false}
onRequestChange={onRequestChange}
>
<Toolbar style={toolBarStyle}> />
{this.props.children} // children could be a lot of content
</LeftNav>
);
...