How to make MUI Sidebar switch to Drawer mode on tablet devices?

[Thanawit007z]

I would like to know how to make the sidebar in Dashboard Layout switch to Drawer mode for tablet-sized devices (e.g., iPad), similar to how it works on mobile devices. Currently, it only switches to Drawer mode when the screen size is small (mobile). How can I achieve this for tablet-sized screens as well?
Ipad

mobile

[bharatkashyap]

We're in the process of adding a prop to the DashboardLayout which will allow controlling the sidebar's collapsed state: #4406

You should be able to detect any screen size and set the collapsed mode with that prop

[Thanawit007z]

Is it currently under development? How long will it take?

[bharatkashyap]

It's on the roadmap for the version after the next one (so v0.11.0) but keep in mind that the roadmap is dynamic and can change sometimes

[apedroferreira]

We could maybe make the mobile breakpoint overridable with a new prop in DashboardLayout...

In the meantime, if it doesn't cause other issues, maybe you can try changing breakpoint widths in the theme so that the the drawer navigation shows at a larger width. Maybe something like in this example:

const exampleTheme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 1200,
      lg: 1200,
      xl: 1536,
    },
  },
});

[Thanawit007z]

I have set the breakpoints as you provided, but the sidebar still looks the same.

[apedroferreira]

Sorry, I meant that just as an example.
The actual breakpoints should be something like:

breakpoints: {
  values: {
    xs: 0,
    sm: 900,
    md: 900,
    lg: 1200,
    xl: 1536,
  },
}

, as the mobile drawer only shows under the sm breakpoint.
With these values it would show until the screen is 900px wide.