feat(posts page): make subreddit input to sidemenu

Author: smartapant

src/pages/posts/posts.html

@@ -1,18 +1,33 @@
 <ion-header>
   <ion-navbar color="primary" text-center>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
     <ion-title>
-      Ionic 2 Reddit Reader: /r/{{ subreddit || 'all' }}
+      {{ subreddit ? '/r/' + subreddit : 'Ionic 2 Reddit Reader' }}
     </ion-title>
   </ion-navbar>
 </ion-header>
 
-<ion-content padding>
 
-  <ion-item>
-    <ion-label color="primary" floating>Go to subreddit</ion-label>
-    <ion-input #subredditInput></ion-input>
-  </ion-item>
-  <button ion-button (click)="goToSubreddit(subredditInput.value)" block>Go</button>
+<ion-menu class="side-menu" type="overlay" [content]="postsList">
+  <ion-header>
+    <ion-toolbar color="primary">
+      <ion-title>Choose subreddit</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item>
+      <ion-label color="primary" floating>Go to subreddit</ion-label>
+      <ion-input #subredditInput></ion-input>
+    </ion-item>
+    <button class="menu-go-button" ion-button (click)="goToSubreddit(subredditInput.value)" block>Go</button>
+  </ion-content>
+
+</ion-menu>
+
+<ion-content #postsList padding>
 
   <ion-spinner *ngIf="!loadCompleted" name="crescent" class="posts-load-spinner"></ion-spinner>
 

src/pages/posts/posts.scss

@@ -41,4 +41,11 @@ page-posts {
     top: 2px;
     margin-right: 2px;
   }
+
+  .side-menu {
+    .menu-go-button {
+      width: 65%;
+      margin: 5px auto;
+    }
+  }
 }