Tengo el siguiente código en reaccionar:

 import "./App.css"; import { dark_theme } from "./themes"; import { ThemeProvider, Toolbar } from "@mui/material"; import AppBar from "@mui/material/AppBar"; import Box from "@mui/material/Box"; import Drawer from "@mui/material/Drawer"; import Typography from "@mui/material/Typography"; import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material"; function App() { return ( <ThemeProvider theme={dark_theme}> <Box sx={{ backgroundColor: "background.default", width: "100vw", height: "100vh", }} display={"flex"} > <AppBar> <Toolbar> <Typography>workspace</Typography> </Toolbar> </AppBar> <Drawer id={"left-drawer"} open={true} variant={"persistent"} anchor={"left"} sx={{ color: "primary.main", backgroundColor: "background.default", "& .MuiDrawer-paper": { width: 200, boxSizing: "border-box", p: 2, }, }} > <Accordion> <AccordionSummary> <Typography>objects</Typography> </AccordionSummary> <AccordionDetails> <Typography>objects</Typography> </AccordionDetails> </Accordion> </Drawer> </Box> </ThemeProvider> ); } export default App;

aunque AppBar y Drawer son paralelos, Drawer se extiende por encima de AppBar y todo el contenido debajo.

¿Cómo puedo hacer que el Drawer empuje AppBar y todo el contenido de abajo hacia el lado derecho cuando está extendido, en lugar de cubrir todo lo que se muestra a continuación?

por cierto dark_theme solo tiene color y fuente.