Fix toolbar buttons when resizing.

Now the menu for the left sidebar will be on the left, while the
remaining buttons will be on the right.

Author: uncledlm

src/app/views/main.html

@@ -25,20 +25,24 @@ <h1>AMD</h1>
 </md-sidenav>
 
 <div layout="column" flex>
-    <md-toolbar layout="row" layout-align="end center">
-        <md-button hide-sm class="toolbar-button" aria-label="Search">
-            <i class="material-icons">search</i>
-        </md-button>
-        <md-button hide-sm class="toolbar-button" aria-label="Notifications">
-            <i class="material-icons">notifications</i>
-            <span class="notifications-label">7</span>
-        </md-button>
-        <md-button hide-sm class="toolbar-button" aria-label="Settings" ng-click="vm.toggleRightSidebar()">
-            <i class="material-icons">menu</i>
-        </md-button>
-        <md-button hide-gt-sm ng-click="vm.toggleItemsList()" aria-label="Menu">
-            <i class="material-icons">menu</i>
-        </md-button>
+    <md-toolbar layout="row" layout-align="center center">
+        <section layout-align="start center" layout-fill flex>
+            <md-button hide-gt-sm ng-click="vm.toggleItemsList()" aria-label="Menu">
+                <i class="material-icons">menu</i>
+            </md-button>
+        </section>
+        <section layout-align="end center">
+            <md-button class="toolbar-button" aria-label="Search">
+                <i class="material-icons">search</i>
+            </md-button>
+            <md-button class="toolbar-button" aria-label="Notifications">
+                <i class="material-icons">notifications</i>
+                <span class="notifications-label">7</span>
+            </md-button>
+            <md-button class="toolbar-button" aria-label="Settings" ng-click="vm.toggleRightSidebar()">
+                <i class="material-icons">menu</i>
+            </md-button>
+        </section>
     </md-toolbar>
 
     <md-content flex class="md-padding page-content">