How do I set the drop down menu position in Material UI - css

Question

I am building a Gatsby app and I want once the Menu icon is clicked, my menu will drop down right under the and width to be 100%. Here is my code:
I tried to solve the problem by setting this inside the component, but the component doesn't change at all:
getContentAnchorEl={null}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
import React, { useState } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import MenuItem from "#material-ui/core/MenuItem"
import { Menu } from '#material-ui/core';
import { Link } from "gatsby"
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: "#e8eaf6",
color: "black"
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1
},
}));
export default function NavBar() {
const classes = useStyles();
const [open, setOpen] = useState(false)
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (e) =>{
setOpen(!open)
setAnchorEl(document.querySelector('header'))
}
const handleMenuClose = () => {
setOpen(!open)
setAnchorEl(null)
}
return (
<AppBar position="static" className={classes.root}>
<Toolbar>
<Typography variant="h5" className={classes.title}>
Inhouse Orders
</Typography>
<IconButton edge="false" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon onClick={(e)=>handleClick(e)}/>
</IconButton>
<Menu
className={classes.menu}
open={open}
onClose={handleMenuClose}
getContentAnchorEl={null}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
>
<Link to="/1"><MenuItem>1</MenuItem></Link>
<Link to="/2"><MenuItem>2</MenuItem></Link>
<Link to="/3"><MenuItem>3</MenuItem></Link>
<Link to="/4"><MenuItem>4</MenuItem></Link>
</Menu>
</Toolbar>
</AppBar>
);
}
What should I do? Should I create my own theme? Or change a style is ok?

Answer 1

You can use the Anchor playground of the Material UI Popover documentation to determine which parameters to use to adjust the position of the dropdown menu.
About the width of 100%, I am not sure to understand what you want to achieve. The anchor of the dropdown menu is fixed and depending on the style you apply, the width will adapt to the size of the content. With a width of 100%, perhaps you want to use a Dialog instead of a dropdown menu.