I have following code in react:

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;

even though AppBar and Drawer are parallel the Drawer extends above the AppBar and all the content below.

how can i make it so the Drawer pushes AppBar and all the contents below to right side when its extended, rather than covering everything rendered below?

btw dark_theme only has color and font.