As a novice in layout design, I am currently developing a web application for both mobile and desktop using React and Material UI. My challenge lies in placing the app navigation at the bottom of the screen. The issue arises because the location of the app navigation differs on various mobile devices such as iPhone X and iPhone 7. How can I make sure that it is responsive across multiple mobile devices, and potentially on tablets and desktops as well?
https://i.sstatic.net/j0eWp.png
https://i.sstatic.net/kftkI.png
Here is my React and Material UI code:
const useStyles = makeStyles({
divContainer: {
display: 'flex',
alignItems: 'flex-end',
height: '99vh',
},
root: {},
});
export default function SimpleBottomNavigation() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return (
<Container className={classes.divContainer}>
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<BottomNavigationAction label="Home" icon={<HomeRoundedIcon />} />
<BottomNavigationAction label="Wishlist" icon={<FavoriteIcon />} />
<BottomNavigationAction
label="Add"
icon={<AddCircleOutlineRoundedIcon />}
/>
<BottomNavigationAction
label="Notifications"
icon={<NotificationsIcon />}
/>
<BottomNavigationAction
label="Profile"
icon={<AccountCircleRoundedIcon />}
/>
</BottomNavigation>
</Container>
);
}