Raise Header's Z-Index Over Material UI Modal Backdrop

Issue

I'm building a mobile version of a web app using Material UI and having trouble matching designs. I'm using MUI App-Bar together with MUI Modal to create something similar to the mockups shown below.

The expected behavior is that the user selects the button in the top right of the header to open the modal, and has the option to use the top right button again to close the modal. The user should also be able to select My App logo in the header to navigate to the home page.

The actual behavior is that the header bar is covered by the modal's backdrop; I can add styling like marginTop: 150px to the backdrop to visually achieve the expected result, but the button and the logo are still not usable.

Is there a way to override the backdrop component so that the header will be usable?

const useStyles = makeStyles((theme: Theme) => ({
  card: {
    position: "absolute",
    top: "160px",
    width: "90vw",
    borderTopLeftRadius: "0px",
    borderTopRightRadius: "0px",
  },
  backDrop: {
    marginTop: "160px",
  },
}));

const Header = (props) => {
  const classes = useStyles();

  const [menuOpen, setMenuOpen] = React.useState(false);

  const handleOpenUserMenu = () => {
    setMenuOpen(true);
  };

  const handleCloseUserMenu = () => {
    setMenuOpen(false);
  };

  return (
    <AppBar
      position="static"
      style={{
        backgroundColor: "#FFFFFF",
        zIndex: -1,
      }}
    >
      <Container maxWidth="xl">
        <Toolbar>
          <Box sx={{ flexGrow: 1 }}>
            <Link to={"/home"}>
              <Logo className={classes.logo} />
            </Link>
          </Box>
          <Box sx={{ flexGrow: 0 }}>
            <IconButton onClick={handleOpenUserMenu}>
              <MenuIcon />
            </IconButton>
            <Modal
              open={menuOpen}
              onClose={onClose}
              BackdropProps={{ classes: { root: classes.backDrop } }}
            >
              <Card className={classes.card}>
                <CardContent>
                  <MenuItems menuOptions={menuOptions} />
                </CardContent>
              </Card>
            </Modal>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
};

Solution

As stated in MUIModal documentation the modal component is supposed to behave like that I would try to use menu component instead

Quoting documentation:

If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal. Modal is a lower-level construct that is leveraged by the following components:

• Dialog
• Drawer
• Menu <--
• Popover

Answered By - Neveen Atik