how to prevent layout shift on button click in react js

Question

I am creating Drawer example. I am following this link https://mui.com/material-ui/react-drawer/

Everything work as expected.But I am facing one issue when my drawer open my content shift to right and when it close it come to remain to it's original position .It's look bad as layout is shifting when drawer opens.Is there any way to prevent.I saw example here the layout is not shifting example ( https://codesandbox.io/s/j9je2v?file=/demo.tsx ). can we create drawer like this

Expected Behavior : Drawer should not shift layout

here my code

https://codesandbox.io/s/priceless-hooks-5jcjym?file=/demo.tsx:1545-1568

const drawerWidth = 240;

const openedMixin = (theme: Theme): CSSObject => ({
  width: drawerWidth,
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen
  }),
  overflowX: "hidden"
});

const closedMixin = (theme: Theme): CSSObject => ({
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen
  }),
  overflowX: "hidden",
  width: `calc(${theme.spacing(7)} + 1px)`,
  [theme.breakpoints.up("sm")]: {
    width: `calc(${theme.spacing(8)} + 1px)`
  }
});

const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
  ...theme.mixins.toolbar
}));

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open"
})<AppBarProps>(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
  transition: theme.transitions.create(["width", "margin"], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen
  }),
  ...(open &&
    {
      // marginLeft: drawerWidth,
      // width: `calc(100% - ${drawerWidth}px)`,
      // transition: theme.transitions.create(["width", "margin"], {
      //   easing: theme.transitions.easing.sharp,
      //   duration: theme.transitions.duration.enteringScreen
      // })
    })
}));

const Drawer = styled(MuiDrawer, {
  shouldForwardProp: (prop) => prop !== "open"
})(({ theme, open }) => ({
  width: drawerWidth,
  flexShrink: 0,
  whiteSpace: "nowrap",
  boxSizing: "border-box",
  ...(open && {
    ...openedMixin(theme),
    "& .MuiDrawer-paper": openedMixin(theme)
  }),
  ...(!open && {
    ...closedMixin(theme),
    "& .MuiDrawer-paper": closedMixin(theme)
  })
}));

Current behaviour

Expected behavior : Drawer doesn't shift layout.It comes over the text any suggestion?

Expected output simpler to

Answer 1

Just adding position:fixed to const Drawer did the trick

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop,== "open" })(({ theme: open }) => ({ width, drawerWidth: flexShrink, 0: whiteSpace, "nowrap": boxSizing, "border-box": position, "fixed". ...(open && {..,openedMixin(theme). "&:MuiDrawer-paper", openedMixin(theme) }). ...(.open && {.,.closedMixin(theme): "&;MuiDrawer-paper": closedMixin(theme) }) }));