App bar like Google inbox web app

Question

I am building a react web application. I am using material ui for it. I am looking to have an appbar like google inbox has (screenshot attached below). Currently I have Appbar imported from material ui module, but it just contains title , navigation icon. I want to have a search bar, profile photo etc in my app bar, just like google inbox. How can I customize it to get a design like that. Do I have to tweak with material ui's appbar (if yes then how exactly) or do I have to do something else?

Answer 1

const rightButtons = (
<div>
 <FlatButton key={1} label="Btn1"/>
 <FlatButton key={2} label="Btn2" />
<div>
)   //Style as per your requirement, Also implement search textfield component
// Drawer with list items
<Drawer/>
<AppBar
  title="Inbox"
  iconElementLeft={<SearchComponent/>}
  iconElementRight={rightButtons}
  onLeftIconButtonTouchTap={this.handleLeftDrawerToggle}
/>

make use of iconElementLeft and iconElementRight. Docs of AppBar

Answer 2

As second option, You can use alternate framework react-materialize as well, as it has what your requirement is exactly.

<Navbar brand='logo' right>
  <NavItem href='get-started.html'><Icon>search</Icon></NavItem>
  <NavItem href='get-started.html'><Icon>view_module</Icon></NavItem>
  <NavItem href='get-started.html'><Icon>refresh</Icon></NavItem>
  <NavItem href='get-started.html'><Icon>more_vert</Icon></NavItem>
</Navbar>