how to set up a Drawer component so that it pushes all the content of the site to the side and is not yet affected by the scroll?

Question

The idea was to push all other contents of the other Box to the right when the Drawer was, but it was immune to the mouse scroll leaving its contents always visible

  <Box>
    <Sidebar onClose={(data) => {
      setOpen(data);
    }} open={open} />
  </Box>

  <Box>
    <Navbar onOpen={(data) => {
      setOpen(data);
    }} />

    <Perfil />
    <AboutMe />
    <DevSkills />
    <Services />
    <Experience />
    <Qualificacoes />
    <Footer />
  </Box>

</Box>