layout

src/app/pages/home/home-page.component.html

@@ -1,3 +1,3 @@
 <p>
-  home works!
+  home works! home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!
 </p>

src/app/pages/pages.component.html

@@ -1,4 +1,23 @@
-<div>header</div>
-<of-sidebar></of-sidebar>
-<router-outlet></router-outlet>
-<div>footer</div>
+<td-layout>
+    <td-layout-nav>
+
+        <of-header></of-header>
+
+        <mat-sidenav-container fullscreen>
+            <of-sidebar></of-sidebar>
+
+            <div tdMediaToggle="gt-xs" [mediaClasses]="['push-md']">
+                <router-outlet></router-outlet>
+            </div>
+
+        </mat-sidenav-container>
+
+    </td-layout-nav>
+
+    <td-layout-footer>
+        <div layout="row" layout-align="start center">
+            <span class="mat-caption">Copyright &copy; 2017 Loafle. All rights reserved</span>
+        </div>
+    </td-layout-footer>
+
+</td-layout>

src/app/pages/pages.module.ts

@@ -5,6 +5,7 @@ import { PagesRoutingModule } from './pages-routing.module';
 import { SidebarComponent } from 'app/commons/layouts/sidebar/sidebar.component';
 import { CovalentModule } from 'app/commons/ui/covalent/covalent.module';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { HeaderComponent } from 'app/commons/layouts/header/header.component';
 
 @NgModule({
   imports: [
@@ -15,7 +16,8 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
   ],
   declarations: [
     PagesComponent,
-    SidebarComponent
+    SidebarComponent,
+    HeaderComponent
   ]
 })
 export class PagesModule { }