Switching drawer variants dynamically at runtime

Hi,

I was wondering if you have any opinion on using drawers dynamically. I would like to use temporary for mobile, persistent for tablet and permanent for desktop.

However, a single drawer types class seems to be used throughout the contents of the drawer. For example in a persistent drawer as seen here I can count mdc-persistent-drawer__drawer, mdc-persistent-drawer__toolbar-spacer and mdc-persistent-drawer--selected all used in different child components of the parent mdc-persistent-drawer.

Doesn’t this make switching from one drawer type to another really difficult? Maybe you have some tips on how to solve a problem like this.

[acdvorak]

Reopening this issue because it was brought up in https://github.com/material-components/material-components-web-codelabs/issues/78, and seems like a fairly common use case.

[cforsyth68]

Not sure if this will help, but I came up with a different solution (@mui v5), please let me know what you think.

Here’s the codesandbox: https://codesandbox.io/s/responsivedrawer-material-demo-2-hnu6g

Key aspects:

import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
//...
const theme = useTheme();
const isGreaterThanSmallBreakpoint = useMediaQuery(
  theme.breakpoints.up("sm")
);
//...
<Drawer 
   variant={isGreaterThanSmallBreakpoint ? "permanent" : "temporary"}
   //...
 />