feat: add app shell (angular-material)

Add app shell built using angular-material and flex-layout. Refractor
code due to configuration changes.

Fixes #52

src/app/navigation/navigation-routing.module.ts

@@ -1,12 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../../app/core';
+import { Route, extract } from '../core';
 import { NavigationComponent } from './navigation.component';
 
 const routes: Routes = [
   Route.withShell([
-    { path: 'navigation', component: NavigationComponent}
+    {
+      path: 'navigation',
+      component: NavigationComponent,
+      data: { title: extract('Navigation') }
+    }
   ])
 ];
 

src/app/navigation/navigation.component.html

@@ -1,9 +1,6 @@
-<div class="fluid-container">
+<!-- <div class="fluid-container">
   <div class="container">
 
-       <!--  <div class="card card-header">
-        <h4 class="col-sm-3 font-weight-bold">Navigation</h4> -->
-
         <div class="col-sm-4 mt-5 mb-3 mx-auto">
           <input class="form-control mr-sm-2" placeholder="Filter by Name" type="text">
         </div>
@@ -16,16 +13,13 @@
               <div class="card col-sm-4 mx-auto">
                 <table class="table table-hover table-responsive-md table-fixed">
 
-                    <!--Table head-->
                     <thead>
                         <tr>
                             <th>#</th>
                             <th>Name</th>
                         </tr>
                     </thead>
-                    <!--Table head-->
 
-                    <!--Table body-->
                     <tbody>
                         <tr>
                             <th scope="row">4</th>
@@ -80,7 +74,6 @@
                         </tr>
 
                     </tbody>
-                    <!--Table body-->
 
                 </table>
               </div>
@@ -93,16 +86,13 @@
                 <div class="card col-sm-4 mx-auto">
                     <table class="table table-hover table-responsive-md table-fixed">
 
-                        <!--Table head-->
                         <thead>
                             <tr>
                                 <th>#</th>
                                 <th>Name</th>
                             </tr>
                         </thead>
-                        <!--Table head-->
 
-                        <!--Table body-->
                         <tbody>
                             <tr>
                                 <th scope="row">4</th>
@@ -142,7 +132,6 @@
                             </tr>
 
                         </tbody>
-                        <!--Table body-->
 
                     </table>
                   </div>
@@ -161,4 +150,4 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->

src/app/navigation/navigation.component.spec.ts

@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
 
 import { NavigationComponent } from './navigation.component';
 

src/app/navigation/navigation.component.ts

@@ -1,12 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-navigation',
+  selector: 'mifosx-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss']
 })
 export class NavigationComponent implements OnInit {
+
   currentJustify = 'start';
+
   constructor() { }
 
   ngOnInit() {