I try to align my menu properly but it's not working properly. So the way it's done is that when you arrive on my website and not logged in, the header below is displayed:
When the user is loggedin, the login/register is replaced by a scrolldown menu which is triggered by the click of an avatar. The scroll down works fine but the render of the menu is not aligned as you see below:
I am not able to make the avatar and the menu properly aligned as it's done at first.
below is code:
const fakeName = "First Last";
const isGuest = false;
const StyledProfileMenu = withStyles({
paper: {
border: '1px none',
borderRadius: "21px",
boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
},
})((props) => (
<Menu
elevation={0}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
{...props}
/>
));
const StyledProfileMenuItem = withStyles((theme) => ({
root: {
margin: "2px 30px 1px 10px",
fontFamily: "Source Sans Pro",
fontSize: "",
'&:hover': {
backgroundColor: "#ffffff",
color: '#ff7255'},
'&:focus': {
backgroundColor: "#ffffff",
color: '#ff7255'},
},
}))(MenuItem);
const useStyles = makeStyles(theme => ({
root: {
boxShadow: "none",
backgroundColor: "#ffffff",
marginTop: theme.spacing(3)
},
logo: {
width:"214px",
height:"28px",
marginLeft: theme.spacing(20),
marginRight: theme.spacing(3)
},
search: {
position: 'relative',
borderRadius: "21px",
backgroundColor: "#f4f7f8",
marginRight: theme.spacing(2),
marginLeft: theme.spacing(3),
width: "467px",
height: "40px",
// [theme.breakpoints.up('sm')]: {
// marginLeft: theme.spacing(3),
// width: 'auto',
// },
},
searchIcon: {
padding: theme.spacing(1, 2),
height: '18px',
width: '18px',
position: 'absolute',
pointerEvents: 'none',
alignItems: 'center',
justifyContent: 'center',
color: "#cecece"
},
inputRoot: {
color: "#cecece",
fontFamily: "Source Sans Pro",
fontSize: "18px"
},
inputInput: {
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
width: "467px",
// [theme.breakpoints.up('md')]: {
// width: '20ch',
// },
},
menu: {
display: "flex",
marginLeft: theme.spacing(2),
margin: "auto",
},
menuItem: {
color: "#cecece",
fontSize: "20px",
fontFamily: "Fredoka One",
fontWeight: "bold",
'&:hover': {
backgroundColor: "#ffffff",
color: '#ff7255'},
'&:focus': {
backgroundColor: "#ffffff",
color: '#ff7255'},
marginRight: theme.spacing(3),
marginLeft: theme.spacing(3),
},
userName: {
fontFamily: "Source Sans Pro",
fontWeight: "Bold",
borderBottom: '3px solid #ff7255',
textAlign: "center",
margin: "2px 10px 2px 10px",
paddingBottom: "2px"
}
}));
function Header(){
let loginOrProfile;
const styles = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const profileMenu =
<div>
<IconButton
aria-controls="customized-menu"
aria-haspopup="true"
variant="contained"
color="primary"
onClick={handleClick}>
<Avatar alt="Avatar" src={DefaultAvatar} />
<ArrowDropDownIcon style={{ color: "#ff7255" }}/>
</IconButton>
<StyledProfileMenu
id="customized-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}>
<p className={styles.userName}> {fakeName} </p>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuProfile} />
</StyledProfileMenuItem>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuMessages} />
</StyledProfileMenuItem>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuSettings} />
</StyledProfileMenuItem>
<StyledProfileMenuItem>
<ListItemText primary={TextContents.MenuLogout} />
</StyledProfileMenuItem>
</StyledProfileMenu>
</div>;
const loginMenu =
<Typography className={styles.menuItem}> {TextContents.MenuLoginRegister} </Typography>;
if(isGuest){
loginOrProfile = loginMenu;
} else {
loginOrProfile = profileMenu;
}
return (
<div className={styles.root}>
<AppBar position="static" className={styles.root}>
<Toolbar>
<img src={VillageLogo} alt="logo" className={styles.logo}/>
<div className={styles.search}>
<div className={styles.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder={TextContents.SearchPlaceHolder}
classes={{
root: styles.inputRoot,
input: styles.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
<div className={styles.menu}>
<Typography className={styles.menuItem}> {TextContents.MenuDiscover} </Typography>
<Typography className={styles.menuItem}> {TextContents.MenuCreate} </Typography>
<Typography className={styles.menuItem}> {TextContents.MenuHiW} </Typography>
{isGuest && loginMenu}
{!isGuest && profileMenu}
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default Header
If someone may have any idea how to make the alignment proper, I would be super happy
