kinda global scope

src/app/app.component.ts

@@ -2,9 +2,8 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
 import {Subscription} from 'rxjs/Subscription';
 
-import {SidebarStateService} from './theme/sidebar/sidebarState.service';
-
 import {Pages} from './pages';
+import {ThemeGlobal} from "./theme/theme.global";
 
 // TODO: is it really the best place to globally require that dependency?
 require("!style!css!sass!./theme/sass/_ionicons.scss");
@@ -16,7 +15,7 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
 @Component({
   selector: 'app',
   pipes: [],
-  providers: [SidebarStateService],
+  providers: [],
   encapsulation: ViewEncapsulation.None,
   styles: [require('normalize.css'), require('./app.scss')],
   template: `
@@ -37,14 +36,16 @@ export class App {
 
   isMenuCollapsed:boolean = false;
 
-  private _sidebarStateSubscription:Subscription;
+  private _themeGlobalSubscription:Subscription;
 
-  constructor(private _sidebarStateService:SidebarStateService) {
+  constructor(private _themeGlobal:ThemeGlobal) {
-    this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
+    this._themeGlobalSubscription = this._themeGlobal.getDataStream().subscribe((data) => {
+      this.isMenuCollapsed = data['menu.isCollapsed'] != null ? data['menu.isCollapsed'] : this.isMenuCollapsed;
+    });
   }
 
   ngOnDestroy() {
     // prevent memory leak when component destroyed
-    this._sidebarStateSubscription.unsubscribe();
+    this._themeGlobalSubscription.unsubscribe();
   }
 }

src/app/index.ts

@@ -1,7 +1,8 @@
 // App
+import {ThemeGlobal} from "./theme/theme.global";
 export * from './app.component';
 
 // Application wide providers
 export const APP_PROVIDERS = [
-
+  ThemeGlobal
 ];

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

@@ -1,10 +1,9 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
-import {Subscription} from 'rxjs/Subscription';
 
 import {MsgCenter} from '../msgCenter';
 import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
 import {ScrollPosition} from '../directives/scrollPosition.directive';
-import {SidebarStateService} from '../sidebar/sidebarState.service'
+import {ThemeGlobal} from "../theme.global";
 
 @Component({
   selector: 'page-top',
@@ -17,15 +16,14 @@ export class PageTop {
   isScrolled:Boolean = false;
   isMenuCollapsed:boolean = false;
 
-  private _sidebarStateSubscription:Subscription;
 
-  constructor(private _sidebarStateService:SidebarStateService) {
+  constructor(private _themeGlobal:ThemeGlobal) {
-    this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
+
   }
 
   toggleMenu() {
     this.isMenuCollapsed = !this.isMenuCollapsed;
-    this._sidebarStateService.stateChanged(this.isMenuCollapsed);
+    this._themeGlobal.setData('menu.isCollapsed', this.isMenuCollapsed);
   }
 
   scrolledChanged(isScrolled) {

src/app/theme/sidebar/sidebar.component.ts

@@ -3,7 +3,7 @@ import {Router} from 'angular2/router';
 
 import {layoutSizes} from '../theme.constants';
 import {SidebarService} from './sidebar.service';
-import {SidebarStateService} from './sidebarState.service';
+import {ThemeGlobal} from "../theme.global";
 
 @Component({
   selector: 'sidebar',
@@ -31,7 +31,7 @@ export class Sidebar {
   constructor(private _elementRef:ElementRef,
               private _router:Router,
               private _sidebarService:SidebarService,
-              private _sidebarStateService:SidebarStateService) {
+              private _themeGlobal:ThemeGlobal) {
 
   }
 
@@ -68,7 +68,7 @@ export class Sidebar {
 
   menuCollapseStateChange(isCollapsed) {
     this.isMenuCollapsed = isCollapsed;
-    this._sidebarStateService.stateChanged(this.isMenuCollapsed);
+    this._themeGlobal.setData('menu.isCollapsed', this.isMenuCollapsed);
   }
 
   hoverItem($event) {
@@ -100,18 +100,25 @@ export class Sidebar {
   }
 
   private selectMenuItem() {
+    let currentMenu;
+
     let isCurrent = (instruction) => (instruction ? this._router.isRouteActive(this._router.generate([instruction])) : false);
+    let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
 
     this.menuItems.forEach(function (menu: any) {
 
       menu.selected = isCurrent(menu.name);
       menu.expanded = menu.expanded || menu.selected;
+      assignCurrent(menu);
 
       if (menu.subMenu) {
         menu.subMenu.forEach(function (subMenu) {
           subMenu.selected = isCurrent(subMenu.name) && !subMenu.disabled;
+          assignCurrent(menu);
         });
       }
     });
+    // notifies all subscribers
+    this._themeGlobal.setData('menu.activeLink', currentMenu);
   }
 }

src/app/theme/sidebar/sidebarState.service.ts

@@ -1,21 +0,0 @@
-import {Injectable} from 'angular2/core'
-import {Subject}    from 'rxjs/Subject';
-
-@Injectable()
-export class SidebarStateService {
-
-  // Observable string sources
-  private _isCollapsed = new Subject<boolean>();
-
-  // Observable string streams
-  isCollapsedStream$ = this._isCollapsed.asObservable();
-
-  // Service message commands
-  stateChanged(isCollapsed:boolean) {
-    this._isCollapsed.next(isCollapsed)
-  }
-
-  getStateStream() {
-    return this.isCollapsedStream$;
-  }
-}

src/app/theme/theme.global.ts

@@ -0,0 +1,24 @@
+import {Injectable} from 'angular2/core'
+import {Subject}    from 'rxjs/Subject';
+
+@Injectable()
+export class ThemeGlobal {
+  private _data = new Subject<Object>();
+
+  dataStream$ = this._data.asObservable();
+
+  constructor() {
+  }
+
+  setData(key, value) {
+    let current = this._data[key];
+    if (current != value) {
+      this._data[key] = value;
+      this._data.next(this._data);
+    }
+  }
+
+  getDataStream() {
+    return this.dataStream$;
+  }
+}