feat(Menu Drawer): Improves menu drawer

fix #17
AndreVarandas · Oct 7, 2018 · 84c7c48 · 84c7c48
1 parent 98eb6d2
commit 84c7c48
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/src/app/app.html b/src/app/app.html
@@ -1,12 +1,13 @@
 <ion-menu [content]="content">
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>Menu</ion-title>
-    </ion-toolbar>
-  </ion-header>
 
   <ion-content>
-    <ion-list>
+    <div class="drawer-background">
+      <div class="drawer-background-content" padding>
+        <div class="drawer-title">Space X Explorer</div>
+        <div class="drawer-subtitle">Advanced Rockets and Spacecraft</div>
+      </div>
+    </div>
+    <ion-list no-lines>
       <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>

diff --git a/src/app/app.scss b/src/app/app.scss
@@ -29,3 +29,28 @@
 .card-content-wp {
     color: #b1b1b1
 }
+
+.drawer-background {
+
+    display: flex;
+    min-height: 200px;
+    background-image: url(../assets/imgs/placeholder.jpeg);
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    .drawer-background-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+
+        .drawer-title {
+            font-size: 1.85rem;
+            margin-bottom: 0.85rem;
+        }
+
+        .drawer-subtitle {
+            font-weight: 100;
+            color: #b1b1b1;
+        }
+    }
+}