How can I do responsive drawer in material ui?

Question

Default component drawer allways opening like a modal window on top of everything. But I need to responsive component drawer for opening drawer like a left menu inside container that resize central content. How can I do this with material ui ?

Answer 1

I would prefer if you shared your code here so that we could work on that, but going off of the docs, your solution is a persistent drawer with content that shifts based on drawer state, which is documented here (and the codesandbox if you wanted to mess around with it)

In order to make anything "responsive" (as in change the way it looks based on screen size) you can use this kind of a notation for its styling:

appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },

menuButton: {
    marginRight: 20,
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  }, 

Which simply says that if the application is running in a "sm" (small) window, it will apply the styling you give inside the {}, so in this example, the width of the header will be calc(100% - ${drawerWidth}px) and a menu button will be displayed to open the drawer.

You can apply this technique to the persistent drawer code in the docs to get what you are asking for. Again, I would be happy to work on your code if you try it and cannot get it to work.