Fix layout bugs in side nav

app/src/app/app.component.ts

@@ -72,4 +72,12 @@ export class MyApp {
     this.authProvider.logout();
     this.nav.setRoot(LoginPage);
   }
+
+  get banner() {
+    if (this.user.profile_banner_url) {
+      return this.user.profile_banner_url;
+    } else {
+      return this.user.profile_background_image_url_https;
+    }
+  }
 }

app/src/app/app.html

@@ -7,9 +7,9 @@
 
   <ion-content>
     <div class="user-info" *ngIf="user" (click)="showProfile(user.id)" menuClose>
-      <div class="user-banner" [style.background]="'url('+ user.profile_background_image_url_https +')'">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 300 100"
-          xml:space="preserve" width="100%" class="svg-triangle">
+      <div class="user-banner" [style.background]="'url('+ banner +')'">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
+          viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
           <polygon points="0,75  0,100 300,100 300,99" fill="#FFFFFF" />
         </svg>
         <img src="{{ user.profile_image_url_https }}" alt="User" class="user-avatar">
@@ -19,10 +19,10 @@
       </div>
     </div>
     <ion-list>
-      <button menuClose ion-item icon-start *ngFor="let page of pages" (click)="openPage(page)">
+      <button menuClose ion-item no-padding icon-start *ngFor="let page of pages" (click)="openPage(page)">
         <ion-icon name="{{page.icon}}"></ion-icon>{{page.title}}
       </button>
-      <button menuClose ion-item icon-start (click)="logout()">
+      <button menuClose ion-item no-padding icon-start (click)="logout()">
         <ion-icon name="log-out"></ion-icon>Logout
       </button>
     </ion-list>

app/src/app/app.scss

@@ -45,4 +45,15 @@
             }
         }
     }
+    .label-md {
+        margin-left: 8px;
+        display: flex;
+        align-items: center;
+    }
+    .item-inner {
+        padding-left: 8px;
+    }
+    .ion-icon {
+        line-height: 1;
+    }
 }