Add AureliaSpa template (#398)

templates/AureliaSpa/ClientApp/app/components/app/app.css

@@ -0,0 +1,6 @@
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    .body-content {
+        padding-top: 50px;
+    }
+}

templates/AureliaSpa/ClientApp/app/components/app/app.html

@@ -0,0 +1,14 @@
+<template>
+    <require from="../navmenu/navmenu.html"></require>
+    <require from="./app.css"></require>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-sm-3">
+                <navmenu router.bind="router"></navmenu>
+            </div>
+            <div class="col-sm-9 body-content">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+</template>

templates/AureliaSpa/ClientApp/app/components/app/app.ts

@@ -0,0 +1,34 @@
+import { Aurelia } from 'aurelia-framework';
+import { Router, RouterConfiguration } from 'aurelia-router';
+
+export class App {
+    router: Router;
+
+    configureRouter(config: RouterConfiguration, router: Router) {
+        config.title = 'Aurelia';
+        config.map([{
+            route: [ '', 'home' ],
+            name: 'home',
+            settings: { icon: 'home' },
+            moduleId: '../home/home',
+            nav: true,
+            title: 'Home'
+        }, {
+            route: 'counter',
+            name: 'counter',
+            settings: { icon: 'education' },
+            moduleId: '../counter/counter',
+            nav: true,
+            title: 'Counter'
+        }, {
+            route: 'fetch-data',
+            name: 'fetchdata',
+            settings: { icon: 'th-list' },
+            moduleId: '../fetchdata/fetchdata',
+            nav: true,
+            title: 'Fetch data'
+        }]);
+
+        this.router = router;
+    }
+}