refactor(@theme): refactor style system

src/app/@theme/layouts/base-header/_base-header.component.theme.scss

@@ -0,0 +1,24 @@
+@mixin base-header-theme() {
+  /deep/ base-header {
+    i.control-icon {
+      &:hover {
+        color: $nga-color-secondary;
+      }
+    }
+
+    .logo {
+      span {
+        color: $nga-color-secondary;
+      }
+
+      &:hover span {
+        color: $nga-color-default;
+      }
+    }
+
+    .left > *,
+    .right > * {
+      border-color: rgba($nga-color-default, 0.2);
+    }
+  }
+}

src/app/@theme/layouts/base-header/base-header.component.scss

@@ -0,0 +1,64 @@
+:host {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  i.control-icon {
+    &:before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+  }
+
+  .left {
+    > * {
+      padding: 0 1.25rem;
+      border-right-width: 1px;
+      border-right-style: solid;
+
+      &: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;
+    }
+  }
+
+  .right {
+    > * {
+      padding: 0 1.25rem;
+      border-left-width: 1px;
+      border-left-style: solid;
+
+      &:first-child {
+        border: none;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+  }
+}
+

src/app/@theme/layouts/base-header/base-header.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
+
+@Component({
+  selector: 'base-header',
+  styleUrls: ['./base-header.component.scss'],
+  template: `
+    <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">
+      <search-input></search-input>
+      <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>
+  `
+})
+export class BaseHeaderComponent {
+  constructor(private sidebarService: NgaSidebarService) {
+  }
+
+  toggleSidebar() {
+    this.sidebarService.toggle(true);
+  }
+}