I have created a Material UI Screen. In which have this structure
<div>
<Router>
<Appbar>
</Appbar>
<Drawer>
</Drawer>
<main>
</main>
</Router>
</div>
I have used the variant="permanent" for the Drawer.
Issue: The content inside the main tag is a big table with lots of column. I have used it outside of the Drawer class. but when scroll horizontally on the left in the table container, the drawer also goes left along with it. I am using permanent variant, then too it goes left.
Any idea on this one. What i think is that Drawer and the main tag are attached so scrolling left the table, scroll both of them.
The Appbar position is fixed. Trying to make the navigation drawer to be fixed too; This is the mockup how it looks like.
Update: Moved the code to Codepen https://1hi76.csb.app/