Material UI: Display the dialog at the bottom left of the page

I have a project to monitor employees and I have a sidebar in this project.

As is evident in the first two pictures, there is a sidebar, and inside it there is a button. Then I press the button, then the dialog appears in the "bottom left" of the page, and I want to do the same idea.

And the thing that I did is in the third picture, I create a button within the sidebar, and when I click on this button, a dialog appears, but the dialog appears in the middle of the page and not at the bottom left of the page.

How can I solve this problem?

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        dialogPaper: {
            maxWidth: '36rem',

            height: '33rem',
        },
        border: {
            borderBottom: '10rem'
        }, paper: {
            // padding: theme.spacing(2),
            // textAlign: 'center',
            // color: theme.palette.text.secondary,
        },
        dividerColor: {
            backgroundColor: '#000000',
        },
        resize: {
            fontSize: 24,
            color: '#BDBDBD'
        },
        oneEdgeShadow: {
            background: '#384047',
            boxShadow: '0 0 0 4px #384047, 0 4px 4px black',
        }
    })
);

export default function FormDialog() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const navigation =  useNavigate();

    const onMySettings=() =>{
        console.log('Clicked on My settings');
        navigation('/dashboard/workspace-sidebar/settings');
    }

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <Button variant="outlined" color="primary" onClick={handleClickOpen}>
                Open form dialog
            </Button>
            <Dialog classes={{paper: classes.dialogPaper}}  open={open} onClose={handleClose}
                    aria-labelledby="form-dialog-title">

                <Grid container xs={12}>
                    <Grid item xs={2}>

                        <List component="nav" aria-label="main mailbox folders"
                              style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD', 
                             lineHeight: 1}}>
                            <ListItem button style={{
                                fontWeight: 500,
                                fontSize: '11px',
                                lineHeight: 1,
                                whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                color: '#BDBDBD'
                            }}>
                                <ListItemAvatar>
                                    <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
                                </ListItemAvatar>

                            </ListItem>
                        </List>

                    </Grid>
                    <Divider  classes={{root: classes.dividerColor}}  orientation="vertical" flexItem/>
                    <Grid item xs={5}>
                        <List component="nav" aria-label="main mailbox folders"
                              style={{paddingLeft: '1rem', fontSize: '10px', color: '#BDBDBD', 
                            lineHeight: 1}}>
                            <ListItem button style={{
                                paddingBottom: '1rem',
                                fontWeight: 500,
                                fontSize: '10px',
                                lineHeight: 1,
                                whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                color: '#BDBDBD'
                            }}>
                                <ListItemAvatar>
                                    <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
                                </ListItemAvatar>
                                <ListItemText>Ali Baba {/*Workspaces*/}</ListItemText>
                            </ListItem>

                            <ListItem button>
                                <ListItemText primary="Settings"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Import/Export"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="People"/>

                                <Button onClick={handleClose} startIcon={<PersonAddIcon />} style={{   
                                borderRadius: 2,background: '#7b68ee'}} variant="contained">
                                    Invite
                                </Button>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Spaces"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Integrations"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Template Center"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Trash"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Security & Permissions"/>
                            </ListItem>
                        </List>

                    </Grid>
                    <Divider classes={{root: classes.dividerColor}}  orientation="vertical" flexItem/>
                    <Grid item xs>
                        <List component="nav" aria-label="main mailbox folders"
                              style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD', 
                             lineHeight: 1}}>
                            <ListItem button style={{paddingBottom: '1rem'}}>
                                <ListItemAvatar>
                                    <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
                                </ListItemAvatar>
                                <ListItemText>Ali Baba</ListItemText>
                            </ListItem>

                            <ListItem button onClick={onMySettings}>
                                <ListItemText primary="My Settings"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Notifications"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Layout size & style"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Rewards"/>
                            </ListItem>

                        </List>



                        <List component="nav" aria-label="main mailbox folders"
                              style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD', 
                            lineHeight: 1}}>
                            <ListItem button>
                                <ListItemText primary="Log out"/>
                            </ListItem>

                            <Divider classes={{root: classes.dividerColor}} variant="middle" />
                            <ListItem button>
                                <ListItemText primary="Help"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Hotkeys"/>
                            </ListItem>
                            <ListItem button>
                                <ListItemText primary="Dark mode"/>
                            </ListItem>

                        </List>

                    </Grid>
                </Grid>
              
            </Dialog>
        </div>
    );
}

You need to modify the paper style of the Dialog component.

First create your desirable style and position by makeStyles as below:

const useStyles = makeStyles({
  paper: {
    position: "absolute",
    left: 0,
    bottom: 0
  }
});

and then pass it to the Dialog component:

<Dialog
  classes={{ paper: classes.paper }}
  onClose={handleClose}
  aria-labelledby="simple-dialog-title"
  open={open}
>

working example in sandbox