contentTop -> baContentTop

src/app/theme/components/baContentTop/baContentTop.component.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+
+import {AppState} from "../../../app.state";
+
+@Component({
+  selector: 'ba-content-top',
+  styles: [require('./baContentTop.scss')],
+  template: require('./baContentTop.html'),
+})
+export class BaContentTop {
+
+  public activePageTitle:string = '';
+
+  constructor(private _state:AppState) {
+    this._state.subscribe('menu.activeLink', (activeLink) => {
+      if (activeLink) {
+        this.activePageTitle = activeLink.title;
+      }
+    });
+  }
+}

src/app/theme/components/baContentTop/baContentTop.html

@@ -0,0 +1,9 @@
+<div class="content-top clearfix">
+  <h1 class="al-title">{{ activePageTitle }}</h1>
+
+  <ul class="breadcrumb al-breadcrumb">
+    <li>
+      <a href="#/pages/dashboard">Home</a></li>
+    <li>{{ activePageTitle }}</li>
+  </ul>
+</div>

src/app/theme/components/baContentTop/baContentTop.scss

@@ -0,0 +1,40 @@
+@import '../../sass/conf/conf';
+
+.content-top {
+  padding-top: 13px;
+  padding-bottom: 27px;
+}
+
+h1.al-title {
+  font-weight: $font-bold;
+  color: $default-text;
+  float: left;
+  width: auto;
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  text-transform: uppercase;
+  opacity: 0.9;
+}
+
+.al-breadcrumb {
+  background: none;
+  color: $default-text;
+  padding: 0;
+  margin: 0;
+  float: right;
+  padding-top: 11px;
+  li {
+    font-size: 18px;
+    font-weight: $font-normal;
+  }
+}
+
+.al-look {
+  float: right;
+  margin-right: 10px;
+  padding-top: 10px;
+  > a {
+    font-size: 19px;
+  }
+}

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

@@ -0,0 +1 @@
+export * from './baContentTop.component.ts';