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

Question

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>
);
}

Answer 1

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