Angular4 Material Design Toolbar

questionsCategory: QuestionsAngular4 Material Design Toolbar
Ashish asked 2 years ago

Hi,
I’m trying to design a toolbar in Material and Angular4 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:
 
enter image description here

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