refactor(demos): give each component section its own view

demos/component-docs/navigation/navigation-details.html

@@ -0,0 +1,8 @@
+
+<ion-navbar *navbar>
+  <ion-title>{{selection.title}}</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+ {{selection.content}}
+</ion-content>

demos/component-docs/navigation/navigation.html

@@ -0,0 +1,30 @@
+
+<ion-navbar *navbar>
+  <ion-title>Navigation</ion-title>
+</ion-navbar>
+
+<ion-content>
+  <ion-list>
+
+    <a ion-item (click)="openNavDetailsPage('Angular')">
+      <icon ion-social-angular item-left></icon>
+      Angular
+    </a>
+
+    <a ion-item href="#" (click)="openNavDetailsPage('CSS3')">
+      <icon ion-social-css3 item-left></icon>
+      CSS3
+    </a>
+
+    <button ion-item (click)="openNavDetailsPage('HTML5')">
+      <icon ion-social-html5 item-left></icon>
+      HTML5
+    </button>
+
+    <button ion-item (click)="openNavDetailsPage('Sass')">
+      <icon ion-social-sass item-left></icon>
+      Sass
+    </button>
+
+  </ion-list>
+</ion-content>

demos/component-docs/navigation/navigation.ts

@@ -0,0 +1,42 @@
+import {NavController, NavParams} from 'ionic/ionic';
+import {IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
+
+@IonicView({
+  templateUrl: 'navigation/navigation-details.html'
+})
+class NavigationDetailsPage {
+  constructor(nav: NavController, params: NavParams, events: Events) {
+    this.nav = nav;
+    this.selection = { title: params.data.name };
+    var navData = {
+        'Angular': "A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.",
+        'CSS3': "The latest version of cascading stylesheets - the styling language of the web!",
+        'HTML5': "The latest version of the web's markup language.",
+        'Sass': "Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension."
+    };
+    var navIcons = {
+        'Angular': 'ion-social-angular',
+        'CSS3': 'ion-social-css3',
+        'HTML5': 'ion-social-html5',
+        'Sass': 'ion-social-sass'
+    };
+    this.selection['content'] = navData[this.selection.title];
+    this.selection['icon'] = navIcons[this.selection.title];
+  }
+}
+
+@IonicView({
+    templateUrl: 'navigation/navigation.html',
+})
+export class NavigationPage {
+  
+  constructor(nav: NavController) {
+      this.nav = nav;
+  }
+
+  openNavDetailsPage(item) {
+    this.nav.push(NavigationDetailsPage, { name: item });
+  }
+
+}