Application bar, such as the Google web application for incoming messages

Question

I am creating an interactive web application. I use ui material for this. I am looking to have an appbar, like google inbox (a screenshot is attached below). I currently have an Appbar imported from a material ui module, but it just contains a title, navigation icon. I want to have a search bar, profile photo, etc. The application bar is the same as logging in to Google. How can I customize it to get such a design. Do I need to configure using the ui appbar application (if so, how exactly) or do I need 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}
/>

ElementElft iconElementRight. AppBar

Answer 2

react-materialize, .

<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>