feat: add footer

src/app/blog/blog.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { MatListModule } from '@angular/material';
+import { MarkdownModule } from 'ngx-markdown';
 
 import { BlogComponent } from './blog/blog.component';
 import { PostComponent } from './post/post.component';
-import { MarkdownModule } from 'ngx-markdown';
-import { MatListModule } from '@angular/material';
 
 @NgModule({
   declarations: [

src/app/core/components/layout/layout.component.ts

@@ -41,9 +41,12 @@ import { map } from 'rxjs/operators';
           </div>         
         </mat-toolbar>
 
-        <div [class.container]="!(isHandset$ | async)">
+        <div class="content" [class.container]="!(isHandset$ | async)">
           <router-outlet></router-outlet>
-        </div>  
+        </div>
+        
+        <app-footer>
+        </app-footer>
 
       </mat-sidenav-content>
     </mat-sidenav-container>
@@ -57,6 +60,13 @@ import { map } from 'rxjs/operators';
       height: 100%;
     }
 
+    .content {
+      display: flex;
+      flex: 1 1 auto;
+      padding: 8px;
+      min-height: calc(100% - (63px));
+    }
+
     .container {
       padding-left: 15%;
       padding-right: 15%;

src/app/core/core.module.ts

@@ -5,6 +5,7 @@ import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, Mat
 import { RouterModule } from '@angular/router';
 
 import { LayoutComponent, PageNotFoundComponent } from './components';
+import { FooterModule } from '../shared/footer';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import { LayoutComponent, PageNotFoundComponent } from './components';
     MatButtonModule,
     MatSidenavModule,
     MatIconModule,
-    MatListModule
+    MatListModule,
+    FooterModule
   ],
   exports: [
     LayoutComponent

src/app/shared/footer/footer.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  template: `
+    <mat-toolbar color="primary"></mat-toolbar>
+  `,
+  styles: []
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/footer/footer.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material';
+
+import { FooterComponent } from './footer.component';
+
+@NgModule({
+  declarations: [
+    FooterComponent
+  ],
+  imports: [
+    CommonModule,
+    MatToolbarModule
+  ],
+  exports: [
+    FooterComponent
+  ]
+})
+export class FooterModule { }

src/app/shared/footer/index.ts

@@ -0,0 +1 @@
+export * from './footer.module';