Can anyone help me create an app bar that resembles this design: Click here to view
I have managed to implement the search box in the top half of the app bar, but I am struggling with adding the bottom half. Here is the code I have written so far:
<AppBar
style={{backgroundColor: MuiTheme.palette.primary1Color, flexWrap: 'wrap'}}
showMenuIconButton={false}
title={explorerSearch}
titleStyle={MuiTheme.title}
iconClassNameRight='muidocs-icon-navigation-expand-more'
>
<Toolbar>
<ToolbarGroup>
{this._getContent()}
</ToolbarGroup>
</Toolbar>
</AppBar>
This is the current output: View image here
I want the "TEXT" to appear on a new line below the search bar. Any ideas on how I can achieve this?