Hello, I am developing a bar app.
<AppBar position="sticky" className={classes.appBar} >
<Container maxWidth="lg">
<Toolbar className={classes.root}>
<Typography noWrap>
<img src={require("./nodejs-icon.svg")} alt="bug" height={100} />
</Typography>
<SearchIcon color="secondary" />
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
{auth && (
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="secondary"
>
<ShoppingCartOutlinedIcon style={{ fontSize: 50 }} />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={open}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</Container>
</AppBar>
Furthermore, I have the following CSS settings:
const headerStyle = (muiBaseTheme => ({
root:{
padding: 0,
margin: 0,
display: 'flex',
width: '100%',
background: "#fff",
},
appBar:{
background: "#fff",
boxShadow:
"0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.0)",
},
flexEnd:{
alignItems: 'flex-end'
},
flexStart:{
alignItems: 'flex-start'
},
flexCenter:{
alignItems: 'center'
}
}))
I defined my toolbar with flex display and would like to align items and create spacing.
I want the image at the beginning.
The input should be in the center.
And the icon at the end.
However, I am unsure how to achieve this responsively.