Crude header with no styles.

src/app/app.component.ts

@@ -7,7 +7,6 @@ import {RouteConfig, Router} from 'angular2/router';
 import {Home} from './home';
 import {Pages} from './pages';
 import {AppState} from './app.service';
-import {RouterActive} from './router-active';
 
 /*
  * App Component
@@ -17,7 +16,6 @@ import {RouterActive} from './router-active';
   selector: 'app',
   pipes: [ ],
   providers: [ ],
-  directives: [ RouterActive ],
   encapsulation: ViewEncapsulation.None,
   styles: [ require('normalize.css'), require('./app.scss') ],
   template: `

src/app/pages/pages.component.ts

@@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
 
 import {Dashboard} from './dashboard';
+import {PageTop} from '../theme';
 
 /*
  * App Component
@@ -11,7 +12,8 @@ import {Dashboard} from './dashboard';
     selector: 'pages',
     encapsulation: ViewEncapsulation.None,
     styles: [],
-    template:  `<router-outlet></router-outlet>`
+    directives: [PageTop],
+    template:  `<page-top></page-top><router-outlet></router-outlet>`
 })
 @RouteConfig([
     { path: '/dashboard', name: 'Dashboard', component: Dashboard, useAsDefault: true },

src/app/router-active/index.ts

@@ -1,2 +0,0 @@
-// Application level directive
-export * from './router-active.directive';

src/app/router-active/router-active.directive.ts

@@ -1,73 +0,0 @@
-import {Router} from 'angular2/router';
-import {isPresent} from 'angular2/src/facade/lang';
-import {
-  Directive,
-  Query,
-  QueryList,
-  Attribute,
-  ElementRef,
-  Renderer,
-  Optional,
-  Input
-} from 'angular2/core';
-import {Instruction, RouterLink} from 'angular2/router';
-
-/**
- * RouterActive dynamically finds the first element with routerLink and toggles the active class
- *
- * ## Use
- *
- * ```
- * <li router-active="active"><a [routerLink]=" ['/Home'] ">Home</a></li>
- * <li [routerActive]=" activeStringValue "><a [routerLink]=" ['/Home'] ">Home</a></li>
- * ```
- */
-@Directive({
-  selector: '[router-active]'
-})
-export class RouterActive {
-  @Input() routerActive: string = undefined;
-  routerActiveAttr: string = 'active';
-
-  constructor(
-    public router: Router,
-    public element: ElementRef,
-    public renderer: Renderer,
-    @Query(RouterLink) public routerLink: QueryList<RouterLink>,
-    @Optional() @Attribute('router-active') routerActiveAttr?: string) {
-
-      this.routerActiveAttr = this._defaultAttrValue(routerActiveAttr);
-  }
-
-  ngOnInit() {
-    this.routerLink.changes.subscribe(() => {
-      if (this.routerLink.first) {
-        this._updateClass();
-        this._findRootRouter().subscribe(() => {
-          this._updateClass();
-        });
-      }
-    });
-  }
-
-  private _findRootRouter(): Router {
-    let router: Router = this.router;
-    while (isPresent(router.parent)) {
-      router = router.parent;
-    }
-    return router;
-  }
-
-  private _updateClass() {
-    let active = this.routerLink.first.isRouteActive;
-    this.renderer.setElementClass(this.element.nativeElement, this._attrOrProp(), active);
-  }
-
-  private _defaultAttrValue(attr?: string) {
-    return this.routerActiveAttr = attr || this.routerActiveAttr;
-  }
-
-  private _attrOrProp() {
-    return isPresent(this.routerActive) ? this.routerActive : this.routerActiveAttr;
-  }
-}

src/app/theme/index.ts

@@ -1,3 +1 @@
-/**
- * Created by Andrey_Grabowsky on 20.04.16.
- */
+export * from './pageTop';

src/app/theme/pageTop/index.ts

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

src/app/theme/pageTop/pageTop.component.ts

@@ -0,0 +1,8 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+@Component({
+    selector: 'page-top',
+    styles: [ require('./pageTop.scss') ],
+    template: require('./pageTop.html')
+})
+export class PageTop {}

src/app/theme/pageTop/pageTop.html

@@ -0,0 +1,24 @@
+<div class="page-top clearfix" scroll-position="scrolled" max-height="50" ng-class="{'scrolled': scrolled}">
+    <a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
+    <a href class="collapse-menu-link ion-navicon" ng-click="isMenuCollapsed=!isMenuCollapsed"></a>
+
+    <div class="search">
+        <i class="ion-ios-search-strong" ng-click="startSearch()"></i>
+        <input id="searchInput" type="text" placeholder="Search for...">
+    </div>
+
+    <div class="user-profile clearfix">
+        <div class="al-user-profile" uib-dropdown>
+            <a uib-dropdown-toggle class="profile-toggle-link">
+                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7vR66BWT_HdVJpwxGJoGBJl5HYfiSKDrsYrzw7kqf2yP6sNyJtHdaAQ"/>
+            </a>
+            <ul  class="top-dropdown-menu profile-dropdown" uib-dropdown-menu>
+                <li><i class="dropdown-arr"></i></li>
+                <li><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
+                <li><a href><i class="fa fa-cog"></i>Settings</a></li>
+                <li><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
+            </ul>
+        </div>
+        <msg-center></msg-center>
+    </div>
+</div>

src/app/theme/theme.component.ts

@@ -1,3 +0,0 @@
-/**
- * Created by Andrey_Grabowsky on 20.04.16.
- */