refactor(app): replace custom actions with built-in component

src/app/@theme/components/header/_header.component.theme.scss

@@ -1,5 +1,5 @@
 @mixin base-header-theme($theme-name) {
-  /deep/ base-header {
+  /deep/ header {
     .logo > a {
       color: $nga-color-secondary !important;
 
@@ -7,10 +7,5 @@
         color: $nga-color-inverse !important;
       }
     }
-
-    .left > *,
-    .right > * {
-      border-color: rgba($nga-color-inverse, 0.2);
-    }
   }
 }

src/app/@theme/components/header/header.component.scss

@@ -3,16 +3,6 @@
   display: flex;
   justify-content: space-between;
 
-  i.control-icon {
-    &::before {
-      font-size: 2.3rem;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
   div {
     display: flex;
     align-items: center;
@@ -55,21 +45,5 @@
       }
     }
   }
-
-  .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/components/header/header.component.ts

@@ -12,16 +12,29 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
       <span class="logo" (click)="goToHome()">NgX&nbsp;<a>Admin</a></span>
       <button (click)="switchTheme()">Switch Theme!</button>
     </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>
+    
+    <nga-actions size="medium" inverse class="right">
+      <nga-action><search-input></search-input></nga-action>
+      <nga-action icon="ion-ios-email-outline"></nga-action>
+      <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
+      <nga-action>
+        <nga-user [menu]="userMenu" name="Han Solo"></nga-user>
+      </nga-action>
+      <nga-action icon="ion-ios-gear-outline"></nga-action>
+    </nga-actions>
   `,
 })
 export class HeaderComponent {
+
+  userMenu = [
+    {
+      title: 'Profile',
+    },
+    {
+      title: 'Log out',
+    },
+  ];
+
   constructor(private sidebarService: NgaSidebarService,
               private menuService: NgaMenuService,
               private themeService: NgaThemeService) {

src/app/@theme/theme.module.ts

@@ -10,6 +10,7 @@ import {
   NgaSidebarModule,
   NgaMenuModule,
   NgaUserModule,
+  NgaActionsModule,
 } from '@nga/theme';
 
 import { SearchInputComponent, HeaderComponent, FooterComponent } from './components';
@@ -28,6 +29,7 @@ const NGA_MODULES = [
   NgaRouteTabsetModule,
   NgaMenuModule,
   NgaUserModule,
+  NgaActionsModule,
 ];
 
 const COMPONENTS = [