I have 3 components in the appbar, 1. Logo 2. Search Input 3. Login Buttons
When viewing on desktop, all three components will be in a single row as shown below
https://i.stack.imgur.com/FYMEH.png
Below is my code snippet:
export default function NavBar(props) {
return (
<>
<CssBaseline />
<HideOnScroll {...props}>
<AppBar elevation={0}>
<Container sx={{ pl: { xs: '5px', sm: '5px', md: '16px' }, pr: { xs: '5px', sm: '5px', md: '16px' } }}>
<Toolbar sx={{ pl: { xs: '0px', sm: '0px', md: '16px' }, pr: { xs: '5px', sm: '5px', md: '16px' } }}>
//First Part
<Typography sx={{ fontWeight: 600, display: { xs: 'inline-block', sm: 'inline-block', md: 'inline-block' } }}>LOGO</Typography>
//Second Part
<InputSearch />
//Third Part
<DivRight>
<IconButton sx={{ color: '#fff' }} size='large' aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
<Button variant="outlined" size='small' sx={{backgroundColor:'#fff', height:'30px', borderColor:'#fff'}}>Login</Button>
</DivRight>
</Toolbar>
</Container>
</AppBar>
</HideOnScroll>
</>
)
}
In the second part of the appbar, I want the search input component to be displayed on a separate second row.