refactor(app): make a bit more neat structure

src/app/@theme/components/base-footer/_base-footer.component.theme.scss

@@ -0,0 +1,4 @@
+@mixin base-footer-theme() {
+  /deep/ base-footer {
+  }
+}

src/app/@theme/components/base-footer/base-footer.component.scss

@@ -0,0 +1,14 @@
+:host {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .socials {
+    font-size: 2rem;
+
+    a {
+      padding: 0.4rem;
+    }
+  }
+}

src/app/@theme/components/base-footer/base-footer.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'base-footer',
+  styleUrls: ['./base-footer.component.scss'],
+  template: `
+    <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
+    <div class="socials">
+      <a href="https://github.com/akveo" target="_blank" class="ion ion-social-github"></a>
+      <a href="https://www.facebook.com/akveo" target="_blank" class="ion ion-social-facebook"></a>
+      <a href="https://twitter.com/akveo_inc" target="_blank" class="ion ion-social-twitter"></a>
+      <a href="https://www.linkedin.com/company/akveo" target="_blank" class="ion ion-social-linkedin"></a>
+    </div>
+  `,
+})
+export class BaseFooterComponent {
+}

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

@@ -0,0 +1,16 @@
+@mixin base-header-theme() {
+  /deep/ base-header {
+    .logo > a {
+      color: $nga-color-secondary !important;
+
+      @include hover-focus-active {
+        color: $nga-color-inverse !important;
+      }
+    }
+
+    .left > *,
+    .right > * {
+      border-color: rgba($nga-color-inverse, 0.2);
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+: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;
+
+    & > * {
+      height: 100%;
+      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;
+      font-weight: bold;
+      text-decoration: none;
+      transition: all 0.2s ease;
+      cursor: pointer;
+
+      a {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .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/base-header/base-header.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+import { NgaSidebarService, NgaMenuService } from '@nga/theme';
+import { NgaThemeService } from '@nga/theme/services/theme.service';
+
+@Component({
+  selector: 'base-header',
+  styleUrls: ['./base-header.component.scss'],
+  template: `
+    <div class="left">
+      <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
+      <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>
+  `,
+})
+export class BaseHeaderComponent {
+  constructor(private sidebarService: NgaSidebarService,
+              private menuService: NgaMenuService,
+              private themeService: NgaThemeService) {
+  }
+
+  toggleSidebar() {
+    this.sidebarService.toggle(true);
+  }
+
+  goToHome() {
+    this.menuService.navigateHome();
+  }
+
+  switchTheme() {
+    if (this.themeService.currentTheme == 'pure') {
+      this.themeService.changeTheme('gorgeous');
+    } else {
+      this.themeService.changeTheme('pure');
+    }
+  }
+}

src/app/@theme/components/index.ts

@@ -0,0 +1,3 @@
+export * from '../components/base-header/base-header.component';
+export * from '../components/base-footer/base-footer.component';
+export * from '../components/search-input/search-input.component';

src/app/@theme/components/search-input/_search-input.component.theme.scss

@@ -0,0 +1,7 @@
+@mixin search-input-theme() {
+  /deep/ search-input {
+    input {
+      background: transparent;
+    }
+  }
+}

src/app/@theme/components/search-input/search-input.component.scss

@@ -0,0 +1,27 @@
+:host {
+  display: flex;
+  align-items: center;
+
+  i.control-icon {
+    &:before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    margin-left: 1rem;
+    width: 15rem;
+    transition: width 0.2s ease;
+
+    &.hidden {
+      width: 0;
+      margin: 0;
+    }
+  }
+}

src/app/@theme/components/search-input/search-input.component.ts

@@ -0,0 +1,35 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'search-input',
+  styleUrls: ['./search-input.component.scss'],
+  template: `
+    <i class="control-icon ion ion-ios-search"
+       (click)="showInput()"></i>
+    <input placeholder="Type your search request here..."
+           #input
+           [class.hidden]="!isInputShown"
+           (blur)="hideInput()"
+           (input)="onInput($event)">
+  `,
+})
+export class SearchInputComponent {
+  @ViewChild('input') input: ElementRef;
+
+  @Output() search: EventEmitter<string> = new EventEmitter<string>();
+
+  isInputShown: boolean = false;
+
+  showInput() {
+    this.isInputShown = true;
+    this.input.nativeElement.focus();
+  }
+
+  hideInput() {
+    this.isInputShown = false;
+  }
+
+  onInput(val: string) {
+    this.search.emit(val);
+  }
+}