I am currently working on designing a toolbar using Material and Angular2. My main challenge is formatting the toolbar in such a way that the search bar appears centered in white, while the "Create Project" button and other buttons are aligned to the right. Here is the code snippet:
https://i.sstatic.net/JfI4U.png
<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>
Any suggestions on how I can achieve this layout using the provided Material constructs?