title: Ionic2 customizing the toolbar in side-menu app
body: <p>I am building an Ionic 2 application with side-menu and want to customize my side menu as can be seen in the following image (<em>not exact same, however the important part is how to get that first block with such a picture and some text</em>), with custom color for the entire toolbar etc?:</p>
  
  <p><a href="https://i.stack.imgur.com/4xw9X.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4xw9X.jpg" alt="enter image description here"></a></p>
  
  <p>My application looks like following:</p>
  
  <p><a href="https://i.stack.imgur.com/ZkqX8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZkqX8.png" alt="enter image description here"></a></p>
  
  <p><strong>My app.html:</strong></p>
  
  <pre><code>&lt;ion-menu [content]="content"&gt;
  
    &lt;ion-toolbar&gt;
      &lt;ion-title&gt;Menu&lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"&gt;
          &lt;ion-icon name="{{p.name}}"&gt;&lt;/ion-icon&gt;
          {{p.title}}
        &lt;/button&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  
  &lt;/ion-menu&gt;
  
  &lt;!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --&gt;
  &lt;ion-nav [root]="rootPage" #content swipeBackEnabled="false"&gt;&lt;/ion-nav&gt;
  </code></pre>