refactor(@theme): refactor style system

src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss

@@ -1,76 +0,0 @@
-@import '../../styles/pure/pure.redefines';
-
-:host /deep/ {
-  nga-layout-header > nav {
-    justify-content: space-between;
-
-    i.control-icon {
-      font-size: 2.3rem;
-
-      &:hover {
-        cursor: pointer;
-        color: $nga-color-secondary;
-      }
-    }
-
-    div {
-      display: flex;
-      align-items: center;
-    }
-
-    .left {
-      > * {
-        padding: 0 1.25rem;
-        border-right: 1px solid rgba($nga-color-default, 0.2);
-
-        &:first-child {
-          padding-left: 0;
-        }
-
-        &:last-child {
-          border: none;
-        }
-      }
-
-      .control-icon.ion-navicon {
-        font-size: 2.8rem;
-      }
-
-      .logo {
-        font-size: 1.7rem;
-        text-decoration: none;
-        transition: all 0.2s ease;
-
-        span {
-          color: $nga-color-secondary;
-        }
-
-        &:hover span {
-          color: $nga-color-default;
-        }
-      }
-    }
-
-    .right {
-      > * {
-        padding: 0 1.25rem;
-        border-left: 1px solid rgba($nga-color-default, 0.2);
-
-        &:first-child {
-          border: none;
-        }
-
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-  }
-
-  nga-sidebar {
-
-  }
-
-  nga-layout-footer > nav {
-  }
-}

src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts

@@ -1,33 +1,11 @@
-/*
-* TODO
-* I think we need to store our header, footer,
-* sedibars and etc. separetly, each in it's own
-* component.
-*
-* And of course we need to make this layout part
-* reusable.
-* */
 import { Component } from '@angular/core';
 
-import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
-
 @Component({
   selector: 'one-coll-layout',
-  styleUrls: ['./one-coll.layout.scss'],
   template: `
     <nga-layout>
       <nga-layout-header fixed>
-        <div class="left">
-          <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
-          <a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
-        </div>
-        <div class="right">
-          <i class="control-icon ion ion-ios-search"></i>
-          <i class="control-icon ion ion-ios-email-outline"></i>
-          <i class="control-icon ion ion-ios-bell-outline"></i>
-          <nga-user></nga-user>
-          <i class="control-icon ion ion-ios-gear-outline"></i>
-        </div>
+        <base-header></base-header>
       </nga-layout-header>
 
       <nga-sidebar>
@@ -46,10 +24,4 @@ import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service
   `,
 })
 export class OneCollLayoutComponent {
-  constructor(private sidebarService: NgaSidebarService) {
-  }
-
-  toggleSidebar() {
-    this.sidebarService.toggle(true);
-  }
 }