Angular2 Material Design Toolbar

Question

I'm trying to design a toolbar in Material and Angular2 as shown in the image below. I'm unable to format the toolbar such that the search bar comes in the center (and is in white) and the Create Project and remaining other buttons are flush to the right. The code for this is as follows:

<md-sidenav-container fullscreen>
  <md-sidenav mode="side" opened="false" #sidenav>
    <md-toolbar color="primary">AppLogo</md-toolbar>
  </md-sidenav>
  <div class="main-content">
    <md-toolbar color="primary">
      <span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
      <span><h2>Application Name</h2></span>
      <md-input-container>
        <input mdInput placeholder="Search">
      </md-input-container>
      <div id="right_nav">
        <span><button md-button><md-icon>add</md-icon> Create Project</button></span>
        <span><button md-button><md-icon>help</md-icon></button></span>
        <span><button md-button><md-icon>alarm</md-icon></button></span>
        <span><button md-button><md-icon>face</md-icon></button></span>
      </div>
    </md-toolbar>
  </div>
</md-sidenav-container>

How do I go about doing this using the available Material constructs?

Answer 1

Split toolbar content in 3 part then align each part as needed, flex let content cover 100% width.

<md-sidenav-container fullscreen>
  <md-sidenav mode="side" opened="false" #sidenav>
    <md-toolbar color="primary">AppLogo</md-toolbar>
  </md-sidenav>
  <div class="main-content">
    <md-toolbar color="primary" layout="row">
      <div flex layout="row" layout-align="start center">
        <span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
        <span><h2>Application Name</h2></span>
      </div>
      <div flex layout="row" layout-align="center center">
        <md-input-container>
          <input mdInput placeholder="Search">
        </md-input-container>
      </div>
      <div id="right_nav" flex layout="row" layout-align="end center">
        <span><button md-button><md-icon>add</md-icon> Create Project</button></span>
        <span><button md-button><md-icon>help</md-icon></button></span>
        <span><button md-button><md-icon>alarm</md-icon></button></span>
        <span><button md-button><md-icon>face</md-icon></button></span>
      </div>
    </md-toolbar>
  </div>
</md-sidenav-container>

EXAMPLE