Michel Felipe · Michel Felipe · Michel Felipe · Michel Felipe · Michel Felipe · Michel Felipe
Showing 30 changed files Show diff stats
src/app/index.scss
src/app/index.ts
src/app/layout/blocks/people-block/people-block.component.spec.ts
src/app/layout/boxes/boxes.component.spec.ts
src/app/layout/navbar/navbar.html
src/app/layout/navbar/navbar.scss
src/app/layout/navbar/navbar.spec.ts
src/app/layout/navbar/navbar.ts
src/app/layout/scss/_bootstrap-overrides.scss
src/app/layout/scss/_sidebar.scss
src/app/layout/scss/sidebar/_submenu.scss
src/app/layout/scss/skins/_whbl.scss
src/app/layout/services/body-state-classes.service.spec.ts
src/app/layout/services/body-state-classes.service.ts
src/app/layout/sidebar/sidebar-section.component.ts
src/app/layout/sidebar/sidebar-section.html
src/app/layout/sidebar/sidebar.component.spec.ts
src/app/layout/sidebar/sidebar.component.ts
src/app/layout/sidebar/sidebar.html
src/app/layout/sidebar/sidebar.notification.service.ts
@@ -28,12 +28,16 @@ $primary-color-dark: #0288d1;
 $default-bg-hover-color: #f8f8f8;
 $red-color: #e84e40;
 $red-color-dark: #dd191d;
+$green-color: #8bc34a;
+$green-color-dark: #689f38;
  
 //GRID - media queries breakpoints
 $break-xxs-min: 420px;
 $break-xs-min: 768px;
+$break-sm-min: 992px;
  
 $break-xxs-max: ($break-xxs-min - 1);
+$break-sm-max: ($break-sm-min - 1);
 $break-xs-max: ($break-xs-min - 1);
  
  
@@ -76,4 +80,5 @@ h1, h2, h3, h4, h5 {
 @import "layout/scss/mixins";
 @import "layout/scss/bootstrap-overrides";
 @import "layout/scss/layout";
+@import "layout/scss/sidebar";
 @import "layout/scss/tables";
@@ -5,7 +5,7 @@ import {noosferoAngularRunBlock} from &quot;./index.run&quot;;
 import {MainComponent} from "./main/main.component";
 import {bootstrap, bundle} from "ng-forward";
  
-import {AUTH_EVENTS} from "./login/auth-events";
+import {AuthEvents} from "./login/auth-events";
 import {AuthController} from "./login/auth.controller";
  
 import {Navbar} from "./layout/navbar/navbar";
@@ -23,7 +23,7 @@ NoosferoApp.angularModule = noosferoApp;
  
  
 NoosferoApp.addConstants("moment", moment);
-NoosferoApp.addConstants("AUTH_EVENTS", AUTH_EVENTS);
+NoosferoApp.addConstants("AuthEvents", AuthEvents);
  
 NoosferoApp.addConfig(noosferoModuleConfig);
 NoosferoApp.run(noosferoAngularRunBlock);
@@ -39,8 +39,8 @@ describe(&quot;Components&quot;, () =&gt; {
         });
  
         /**
-         * By default the helper will have the component, with all properties 
-         * ready to be used. Here the mock provider 'EnvironmentService' will 
+         * By default the helper will have the component, with all properties
+         * ready to be used. Here the mock provider 'EnvironmentService' will
          * return the given array with one person.
          */
         it("get block with one people", () => {
@@ -7,7 +7,6 @@ import {
     quickCreateComponent,
     provideEmptyObjects,
     createProviderToValue,
-    getAngularServiceFactory,
     provideFilters
 } from "../../../spec/helpers";
  
 <nav class="navbar navbar-static-top navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
+      <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()" ng-show="ctrl.showHamburguer">
         <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+        <i class="fa fa-bars"></i>
       </button>
       <a class="navbar-brand" ui-sref="main.environment.home">
-        <span class="noosfero-logo"> </span> 
+        <span class="noosfero-logo"> </span>
         <span class="noosfero-name">{{"noosfero.name" | translate}}</span>
       </a>
     </div>
 .navbar {
  
+  margin-bottom: 0px;
+
   .container-fluid {
-    padding-right: 12%;
-    padding-left: 12%;
-    @media (max-width: 978px) {
-      padding-right: 2%;
-      padding-left: 2%;
-    }
  
     .navbar-brand {
       .noosfero-logo {
-        background:url("../assets/images/logo-noosfero.png") no-repeat;
+        background: url("../assets/images/logo-noosfero.png") no-repeat;
         padding: 0px 62px 64px 15px;
       }
     }
@@ -28,5 +24,19 @@
         }
       }
     }
+
+    .navbar-toggle {
+  		display: block;
+      color: #fff;
+      padding: 4px 12px;
+      margin: 10px 10px;
+      text-align: center;
+  	}
+
+    @media (max-width: $break-sm-max) {
+    	.navbar-toggle .fa-bars{
+    		font-size: 14pt;
+    	}
+    }
   }
 }
 import * as helpers from "./../../../spec/helpers";
 import {Navbar} from "./navbar";
  
-import {Injectable, Provider, provide} from "ng-forward";
+import {Injectable, Provider, provide, EventEmitter} from "ng-forward";
  
 import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
  
-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
  
+import events from 'ng-forward/cjs/events/events';
  
 describe("Components", () => {
  
@@ -53,22 +54,19 @@ describe(&quot;Components&quot;, () =&gt; {
                     provide('$uibModal', {
                         useValue: $modal
                     }),
-                    provide('AuthService', {
+                    provide(AuthService, {
                         useValue: authService
                     }),
                     helpers.provideEmptyObjects('moment'),
                     provide('$state', {
                         useValue: stateService
                     }),
-                    provide("$scope", {
-                        useValue: scope
-                    }),
                     provide('SessionService', {
                         useValue: sessionService
                     }),
-                    provide('AUTH_EVENTS', {
+                    provide('AuthEvents', {
                         useValue: {
-                            AUTH_EVENTS
+                            AuthEvents
                         }
                     }),
                     provide('TranslatorService', {
@@ -146,7 +144,7 @@ describe(&quot;Components&quot;, () =&gt; {
  
  
         it('closes the modal after login', (done: Function) => {
-            modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
+            modalInstance = {};
             modalInstance.close = jasmine.createSpy("close");
  
             $modal.open = () => {
@@ -155,19 +153,21 @@ describe(&quot;Components&quot;, () =&gt; {
  
             buildComponent().then((fixture: ComponentFixture) => {
                 let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                let localScope: ng.IScope = navbarComp["$scope"];
  
                 navbarComp.openLogin();
-                localScope.$emit(AUTH_EVENTS.loginSuccess);
+                let successEvent: string = AuthEvents[AuthEvents.loginSuccess];
+
+                (<any>navbarComp.authService)[successEvent].next(user);
+
                 expect(modalInstance.close).toHaveBeenCalled();
                 done();
             });
+
         });
  
         it('updates current user on logout', (done: Function) => {
             buildComponent().then((fixture: ComponentFixture) => {
                 let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                let localScope: ng.IScope = navbarComp["$scope"];
  
                 // init navbar  currentUser with some user
                 navbarComp["currentUser"] = user;
@@ -176,12 +176,14 @@ describe(&quot;Components&quot;, () =&gt; {
                 // and emmit the 'logoutSuccess' event
                 // just what happens when user logsout
                 sessionService.currentUser = () => { return null; };
-                localScope.$emit(AUTH_EVENTS.logoutSuccess);
-                expect(navbarComp["currentUser"]).toBeNull();
+                let successEvent: string = AuthEvents[AuthEvents.logoutSuccess];
+
+                (<any>navbarComp.authService)[successEvent].next(user);
+
                 done();
+                expect(navbarComp["currentUser"]).toBeNull();
+
             });
         });
-
-
     });
 });
-import {Component, Inject} from "ng-forward";
+import {Component, Inject, EventEmitter, Input} from "ng-forward";
 import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
-
-
-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
+import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
+import {BodyStateClassesService} from '../services/body-state-classes.service';
  
 @Component({
     selector: "acme-navbar",
     templateUrl: "app/layout/navbar/navbar.html",
     directives: [LanguageSelectorComponent],
-    providers: [AuthService, SessionService]
+    providers: [AuthService, SessionService, SidebarNotificationService]
 })
-@Inject("$uibModal", AuthService, "SessionService", "$scope", "$state")
+@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService)
 export class Navbar {
  
     private currentUser: noosfero.User;
     private modalInstance: any = null;
+
+    public showHamburguer: boolean = false;
+
     /**
      *
      */
     constructor(
         private $uibModal: any,
-        private authService: AuthService,
+        public authService: AuthService,
         private session: SessionService,
-        private $scope: ng.IScope,
-        private $state: ng.ui.IStateService
+        private $state: ng.ui.IStateService,
+        private sidebarNotificationService: SidebarNotificationService,
+        private bodyStateService: BodyStateClassesService
     ) {
         this.currentUser = this.session.currentUser();
  
-        this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
+        this.showHamburguer = this.authService.isAuthenticated();
+        this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
+
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
             if (this.modalInstance) {
                 this.modalInstance.close();
                 this.modalInstance = null;
             }
  
-            this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
+            this.currentUser = this.session.currentUser();
+            this.showHamburguer = true;
+
+            this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
         });
  
-        this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             this.currentUser = this.session.currentUser();
         });
+
+    }
+
+    public toggleCollapse() {
+        this.sidebarNotificationService.alternateVisibility();
+
+        this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
     }
  
     openLogin() {
@@ -55,8 +72,6 @@ export class Navbar {
         this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
     };
  
-
-
     activate() {
         if (!this.currentUser) {
             this.openLogin();
@@ -54,3 +54,19 @@
 .tabs-wrapper.tabs-no-header .tab-content {
 	padding: 0 20px 20px;
 }
+
+/* LABELS */
+.label {
+	@include border-radius($border-radius-base);
+	font-size: 0.875em;
+	font-weight: 600;
+}
+.label-default,
+.label.label-large {
+	font-size: 1em;
+	padding: 0.4em 0.8em 0.5em;
+}
+.label.label-circle {
+	@include border-radius(50%);
+	padding: 4px !important;
+}
@@ -0,0 +1,311 @@
+#col-left {
+    position: relative;
+    color: #003940;
+    height: 100%;
+
+	a {
+		color: #e1e1e1;
+	}
+	a:hover,
+	.nav-active a.nav-link,
+	a.active {
+		color: #fff;
+	}
+	* {
+		outline: none;
+	}
+}
+#nav-col {
+	padding: 0;
+	z-index: 100;
+	position: absolute;
+	background: #2c3e50;
+	width: 220px;
+  border-right: 2px solid #e7ebee;
+  height: 200%;
+
+	@media (max-width: $break-sm-max) {
+		position: relative;
+		width: auto;
+	}
+}
+#sidebar-nav {
+	max-height: 100%;
+	padding-left: 0;
+	padding-right: 0;
+
+	.nav {
+		> li {
+			margin: 0;
+
+			&.nav-header {
+				color: lighten(#2c3e50, 40%);
+				font-size: 0.8em;
+				padding: 12px 15px 6px 14px;
+				border-top: 2px solid darken(#2c3e50, 4%);
+
+				&.nav-header-first {
+					padding-top: 4px;
+					border-top: 0;
+				}
+			}
+
+			> a {
+				color: #fff;
+				height: 44px;
+			    line-height: 28px;
+			    @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s);
+			    overflow: hidden;
+			    padding: 8px 15px 8px 20px;
+			    border-left: 0 solid transparent;
+
+				&:hover {
+					border-left-color: $primary-color;
+				}
+				> i {
+					position: absolute;
+					margin-top: 6px;
+				}
+				> span {
+				    margin-left: 35px;
+				    font-size: 0.875em;
+				    font-weight: 700;
+
+					&.label {
+						font-size: 0.75em;
+						margin: 5px 0 0 0;
+					    padding: 4px 0.6em;
+					}
+					&.label.label-circle {
+						margin-right: 5px;
+					}
+				}
+			}
+			&.open > a {
+				border-bottom-color: #252525;
+				outline: none;
+				text-decoration: none;
+			}
+			&.active > .submenu > li.active > .submenu {
+				display: block;
+			}
+		}
+		li {
+			@import "sidebar/submenu";
+
+			&.active > .submenu {
+				display: block;
+			}
+		}
+	}
+}
+.navbar-nav .open .dropdown-menu {
+	background-color: #FFFFFF;
+	border: none;
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
+	position: absolute;
+}
+#user-left-box {
+	padding: 20px 15px 20px 25px;
+
+	img {
+		@include border-radius(18%);
+		border: 3px solid #fff;
+	    float: left;
+	    width: 70px;
+	}
+	.user-box {
+		color: #fff;
+	    float: left;
+	    padding-left: 15px;
+	    padding-top: 18px;
+
+		> .name {
+			display: block;
+		    font-size: 1em;
+		    font-weight: 600;
+		    line-height: 1.2;
+
+		    > a {
+		    	color: #fff;
+
+		    	&:hover,
+		    	&:focus {
+		    		color: #E1E1E1;
+		    		text-decoration: none;
+		    	}
+		    }
+		}
+		> .status {
+			display: block;
+		    font-size: 0.75em;
+		    padding-top: 3px;
+		}
+		> .status > i {
+			color: $green-color;
+			margin-right: 4px;
+		}
+	}
+	&.dropdown {
+		.dropdown-menu {
+			top: 55px;
+			left: 30px;
+
+			a {
+				color: #707070;
+				font-size: 0.875em;
+
+				&:hover {
+					background-color: #f6f6f6;
+					color: #707070;
+				}
+			}
+		}
+	}
+}
+@media (min-width: $break-sm-min) {
+	.nav-small {
+		#nav-col {
+			width: 64px;
+		}
+		#content-wrapper {
+			margin-left: 64px;
+		}
+		#nav-col {
+			#user-left-box {
+				display: none;
+			}
+			#sidebar-nav {
+				.nav > li > a {
+					padding-left: 15px !important;
+					padding-right: 15px;
+					text-align: center;
+
+					> i {
+						position: relative;
+						font-size: 1.25em;
+					}
+					> span {
+						display: none;
+					}
+				}
+				.nav > li.nav-header {
+					display: none;
+				}
+				.nav li > a.dropdown-toggle > .drop-icon {
+					display: none;
+				}
+				.nav .submenu > li > a.dropdown-toggle > .drop-icon {
+					display: block;
+				}
+				.nav li .submenu {
+					  left: 64px;
+				    position: absolute;
+				    top: 0;
+				    width: 210px;
+
+				    > li > a {
+						padding-left: 28px;
+					}
+				}
+				.nav > .active > .submenu > li > .submenu {
+					left: auto;
+				    position: relative;
+				    top: auto;
+				    width: 100%;
+
+				    a {
+				    	padding-left: 48px
+				    }
+				}
+			}
+		}
+
+		#nav-col-submenu {
+			@import "sidebar/submenu";
+
+			.submenu {
+				position: absolute;
+				top: 60px;
+				left: 64px;
+				width: 210px;
+
+			    > li > a {
+					padding-left: 28px;
+
+					&.dropdown-toggle > .drop-icon {
+						display: block;
+					}
+				}
+			}
+			> .submenu {
+				display: block !important;
+			}
+			.submenu > li > .submenu,
+			.submenu > li > .submenu {
+				left: auto;
+			    position: relative;
+			    top: auto;
+			    width: 100%;
+
+			    a {
+			    	padding-left: 48px
+			    }
+			}
+		}
+	}
+}
+@media (max-width: $break-sm-max) {
+
+	#sidebar-nav.navbar-collapse {
+		max-height: 336px;
+	}
+}
+
+/* Extracted from original _header.scss */
+#sidebar-nav .nav a {
+  > i {
+  	font-size: 1.125em;
+  }
+  > .open > &, .open > &:focus {
+    background: inherit;
+  }
+  &:hover, .open > &:hover {
+    background: darken(#2c3e50, 4%);
+    color: #fff;
+    outline: none;
+  }
+}
+
+#sidebar-nav .nav-pills > li.active > a,
+#sidebar-nav .nav-pills > li.active > a:hover,
+#sidebar-nav .nav-pills > li.active > a:focus,
+.nav-pills > li.open > a,
+.nav-pills > li.open > a:hover,
+.nav-pills > li.open > a:focus,
+#sidebar-nav .nav-pills > li.open > a,
+#sidebar-nav .nav-pills > li.open > a:hover,
+#sidebar-nav .nav-pills > li > a:focus,
+.nav-small #nav-col #sidebar-nav .nav-pills > li.open > a {
+	background-color: darken(#2c3e50, 4%);
+	color: #fff;
+	border-left-color: $primary-color;
+}
+
+#user-left-box {
+  .profile-image-wrap {
+    float:left;
+    width: 70px;
+    height: 70px;
+  }
+  i.profile-image {
+    border-radius: 18%;
+    border: 3px solid #fff;
+    background-color: #fff;
+    text-align: center;
+  }
+}
+
+.submenu-count {
+	margin-right: 20px !important;
+}
@@ -0,0 +1,52 @@
+a.dropdown-toggle > .drop-icon {
+		color: #868b98;
+    font-size: 12px;
+    margin-top: -6px;
+    position: absolute;
+    right: 25px;
+    top: 50%;
+    @include transition(transform 0.2s ease-in-out 0.1s);
+}
+&.open a.dropdown-toggle > .drop-icon,
+&.active > a.dropdown-toggle > .drop-icon {
+	color: #fff;
+	transform:rotate(90deg);
+}
+
+.submenu {
+	background: darken(#2c3e50, 4%);
+	padding-left: 0;
+	margin: 0;
+	list-style: none;
+
+	li {
+		position: relative;
+
+		> a {
+		    display: block;
+		    font-size: 0.875em;
+		    line-height: 38px;
+		    padding-left: 60px;
+		    color: #fff;
+		    outline: none;
+		    text-decoration: none;
+		    @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s);
+
+				&:hover {
+					background-color: #1f2c39;
+				}
+		}
+		&:first-of-type > a {
+			border-top: 0;
+		}
+		> a:hover,
+		> a:focus,
+		> a.active,
+		&.active > a,
+		&.open > a {
+			text-decoration: none;
+			color: #fff;
+			background-color: darken(#2c3e50, 7%);
+		}
+	}
+}
@@ -0,0 +1,310 @@
+$whbl-nav-col-bg: #ffffff; //f3f5f6
+$whbl-sidebar-linkColor: #484848;
+$whbl-primary-color: #1E96D0; //blue
+$whbl-font-color: #16191c;
+
+.skin-whbl {
+	#header-navbar {
+		background-color: $whbl-primary-color;
+	}
+	.navbar > .container .navbar-brand {
+		background-color: transparent;
+		width: 221px;
+	}
+	#nav-col,
+	#page-wrapper {
+		background-color: $whbl-nav-col-bg;
+	}
+	#sidebar-nav .nav > li > a {
+		color: $whbl-sidebar-linkColor;
+		/* border-bottom: 1px solid #e7ebee; */
+	}
+	#sidebar-nav .nav > .open > .submenu > li > .submenu,
+	#sidebar-nav .nav > .active > .submenu > li > .submenu,
+	#sidebar-nav .nav li .submenu > li.open a,
+	#nav-col-submenu .submenu > li > .submenu,
+	#nav-col-submenu li .submenu > li.open > a {
+	    background-color: darken($whbl-nav-col-bg, 8%);
+	}
+	.nav-pills > li.active > a,
+	.nav-pills > li.active > a:hover,
+	.nav-pills > li.active > a:focus,
+	#sidebar-nav .nav-pills > li.active > a,
+	#sidebar-nav .nav-pills > li.active > a:hover,
+	#sidebar-nav .nav-pills > li.active > a:focus,
+	.nav-pills > li.open > a,
+	.nav-pills > li.open > a:hover,
+	.nav-pills > li.open > a:focus,
+	#sidebar-nav .nav-pills > li.open > a,
+	#sidebar-nav .nav-pills > li.open > a:hover,
+	#sidebar-nav .nav-pills > li.open > a:focus,
+	#sidebar-nav .nav-pills > li > a:focus {
+		background-color: darken($whbl-nav-col-bg, 4%);
+		border-color: $whbl-primary-color;
+		border-bottom-color: #e7ebee;
+		color: $whbl-sidebar-linkColor;
+	}
+	#sidebar-nav .nav-pills > li.active > a > i {
+		color: #2980b9;
+	}
+	#sidebar-nav .nav > li > a:hover {
+		background-color: darken($whbl-nav-col-bg, 4%);
+		border-color: $whbl-primary-color;
+		border-bottom-color: #e7ebee;
+		color: $whbl-sidebar-linkColor;
+	}
+
+	#sidebar-nav .nav > li .submenu li > a:hover {
+		color: $whbl-font-color;
+		font-weight: bold;
+	}
+	#header-navbar .nav > li > a {
+		color: #fff;
+	}
+	#header-navbar .nav > li > a:hover,
+	#header-navbar .nav > li > a:focus,
+	#header-navbar .nav .open > a,
+	#header-navbar .nav .open > a:hover,
+	#header-navbar .nav .open > a:focus {
+		background-color: #2980b9;
+	}
+	#sidebar-nav .nav li .submenu,
+	#nav-col-submenu .submenu {
+		background-color: darken($whbl-nav-col-bg, 4%);
+	}
+	#sidebar-nav .nav li .submenu > li > a,
+	.nav-small #nav-col-submenu .submenu > li > a {
+		color: $whbl-font-color;
+	}
+	#sidebar-nav .nav > .open > .submenu > .open > a,
+	#sidebar-nav .nav > .active > .submenu > .open > a,
+	#sidebar-nav .nav > .active > .submenu > .active > a,
+	#nav-col-submenu .submenu > .open > a,
+	#nav-col-submenu .submenu > .active > a {
+		border-bottom-color: transparent;
+	    box-shadow: 0 -1px 0 transparent inset;
+	}
+	#sidebar-nav .nav > .open > .submenu > .open > a {
+	    border-bottom-color: #dcdfe6;
+		box-shadow: none;
+	}
+	#sidebar-nav .nav li.open > a.dropdown-toggle > .drop-icon,
+	#sidebar-nav .nav li.active > a.dropdown-toggle > .drop-icon {
+		color: $whbl-font-color;
+	}
+	#sidebar-nav .nav li .submenu > li > a:hover,
+	#sidebar-nav .nav li .submenu > li > a.active,
+	#sidebar-nav .nav li .submenu > li.active > a {
+		background-color: darken($whbl-nav-col-bg, 8%);
+	}
+	.navbar > .container .navbar-brand {
+		color: #fff;
+	}
+	.navbar-toggle {
+		color: #fff;
+	}
+	.graph-box {
+		background-color: $whbl-primary-color !important;
+	}
+	.content-wrapper {
+		background-color: #f9f9f9;
+	  height: 100%;
+	  margin-top: 0;
+	  margin-bottom: 0;
+	  position: relative;
+	  min-height: 1200px;
+	  padding: 15px 15px 35px 15px;
+	  margin-left: 220px;
+		// border-left: 2px solid #e7ebee;
+	}
+	#user-left-box {
+
+		.user-box {
+			color: $whbl-font-color;
+			> a {
+				color: $whbl-font-color;
+			}
+			> .name {
+				> a {
+					color: $whbl-font-color;
+
+					&:hover, &:focus {
+						color: $whbl-font-color;
+					}
+				}
+			}
+		}
+		.user-box a:hover,
+		.user-box a:focus {
+			color: darken($whbl-font-color, 20%);
+		}
+	}
+	#sidebar-nav .nav > li.nav-header {
+		border-top-color: #e7ebee;
+		color: darken($whbl-nav-col-bg, 35%);
+	}
+	.nav-tabs {
+		background-color: #f9f9f9;
+	}
+	h1 {
+		color: $whbl-primary-color;
+	}
+	#header-navbar .nav > li > a:hover,
+	#header-navbar .nav > li > a:focus,
+	#header-navbar .nav .open > a,
+	#header-navbar .nav .open > a:hover,
+	#header-navbar .nav .open > a:focus,
+	.navbar-toggle:hover,
+	.navbar-toggle:focus,
+	.mobile-search.active > .btn {
+		background-color: #2980b9;
+	}
+	.main-box {
+		border: 1px solid $main-bg-color;
+	}
+	a,
+	.fc-state-default,
+	.jvectormap-zoomin,
+	.jvectormap-zoomout,
+	#user-profile .profile-details ul > li > span {
+		color: $whbl-primary-color;
+	}
+	a:hover,
+	a:focus,
+	.widget-users li > .details > .name > a:hover,
+	.widget-todo .actions > a:hover {
+		color: $whbl-primary-color;
+	}
+	.table a.table-link:hover {
+		color: #2980b9;
+	}
+	.pagination {
+		> li {
+			> a,
+			> span,
+			> a:hover,
+			> span:hover,
+			> a:focus,
+			> span:focus,
+			> a:active,
+			> span:active {
+				color: $whbl-primary-color;
+			}
+		}
+		> .active {
+			> a,
+			> span,
+			> a:hover,
+			> span:hover,
+			> a:focus,
+			> span:focus {
+				background-color: $whbl-primary-color;
+				border-color: $whbl-primary-color;
+				color: #fff;
+			}
+		}
+	}
+	.notifications-list {
+		.item-footer {
+			background-color: #272d33;
+
+			a:hover {
+				background-color: #0f1114;
+			}
+		}
+	}
+	.btn-primary,
+	.btn-default,
+	.btn-info,
+	.btn-success,
+	.btn-warning,
+	.btn-danger,
+	.btn-primary:hover,
+	.btn-default:hover,
+	.btn-info:hover,
+	.btn-success:hover,
+	.btn-warning:hover,
+	.btn-danger:hover {
+		color: #fff;
+	}
+	.btn-primary {
+		background-color: $whbl-primary-color;
+		border-color: #2980b9;
+	}
+	.btn-primary:hover,
+	.btn-primary:focus,
+	.btn-primary:active,
+	.btn-primary.active,
+	.open .dropdown-toggle.btn-primary {
+		background-color: #2980b9;
+		border-color: #216897;
+	}
+	.btn-success {
+		background-color: $whbl-primary-color;
+		border-color: #2980b9;
+	}
+	.btn-success:hover,
+	.btn-success:focus,
+	.btn-success:active,
+	.btn-success.active,
+	.open .dropdown-toggle.btn-success {
+		background-color: #2980b9;
+		border-color: #1c5c87;
+	}
+	h1 {
+		color: $whbl-primary-color;
+	}
+	.widget-users li > .details > .time {
+		color: $whbl-primary-color;
+	}
+	blockquote,
+	blockquote.pull-right {
+		border-color: $whbl-primary-color;
+	}
+	a.list-group-item.active,
+	a.list-group-item.active:hover,
+	a.list-group-item.active:focus {
+		background-color: $whbl-primary-color;
+		border-color: $whbl-primary-color;
+	}
+	.nav .caret {
+		border-bottom-color: $whbl-primary-color;
+		border-top-color: $whbl-primary-color;
+	}
+	.panel-default > .panel-heading,
+	.notifications-list .item-footer {
+		background-color: $whbl-primary-color;
+	}
+	.notifications-list .item-footer a:hover {
+		background-color: #2980b9;
+	}
+	#invoice-companies .invoice-dates .invoice-number > span,
+	.notifications-list .item a .time {
+		color: $whbl-primary-color;
+	}
+	.table thead > tr > th > a:hover span {
+		color: $whbl-primary-color;
+		border-color: $whbl-primary-color;
+	}
+	.pace .pace-progress {
+		background-color: #fff;
+	}
+}
+.rtl.skin-whbl #content-wrapper {
+	border-left: 0;
+	border-right: 2px solid #e7ebee;
+}
+
+@media (max-width: $break-sm-max) {
+	.skin-whbl {
+		#logo.navbar-brand > img.normal-logo.logo-white {
+			display: block;
+		}
+		#logo.navbar-brand > img.normal-logo.logo-black {
+			display: none;
+		}
+		.navbar > .container .navbar-brand {
+			background-color: $whbl-primary-color;
+		}
+	}
+}
 import * as helpers from '../../../spec/helpers';
 import {BodyStateClassesService} from "./body-state-classes.service";
 import {AuthService} from "./../../login/auth.service";
-import {AUTH_EVENTS} from "./../../login/auth-events";
+import {AuthEvents} from "./../../login/auth-events";
+
+import {EventEmitter} from 'ng-forward';
+
  
 describe("BodyStateClasses Service", () => {
+
     let currentStateName = "main";
     let bodyStateClasseService: BodyStateClassesService;
     let $rootScope: ng.IRootScopeService = <any>{},
@@ -13,20 +17,23 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
                 name: currentStateName
             }
         },
-        authService: AuthService,
+        authService: any = helpers.mocks.authService,
         bodyEl: { className: string },
-        bodyElJq: any;
-
+        bodyElJq: any,
+        contentWrapperEl: { className: string },
+        contentWrapperElJq: any;
  
     let getService = (): BodyStateClassesService => {
         return new BodyStateClassesService($rootScope, $document, $state, authService);
     };
  
     beforeEach(() => {
-        authService = <any>{};
         authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(true);
         bodyEl = { className: "" };
         bodyElJq = [bodyEl];
+
+        contentWrapperEl = { className: "" };
+        contentWrapperElJq = [contentWrapperEl];
     });
  
     it("should add the class noosfero-user-logged to the body element if the user is authenticated", () => {
@@ -58,8 +65,9 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
  
     it("should capture loginSuccess event and add noosfero-user-logged class to the body element", () => {
         let userLoggedClassName = BodyStateClassesService.USER_LOGGED_CLASSNAME;
-        $rootScope = <any>helpers.mocks.scopeWithEvents();
+
         bodyElJq.addClass = jasmine.createSpy("addClass");
+        bodyElJq.removeClass = jasmine.createSpy("removeClass");
         authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(false);
         let service = getService();
  
@@ -68,11 +76,11 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         // triggers the service start
         service.start();
         // check if the the body element addClass was not called yet,
-        // because the user is not authenticated  
+        // because the user is not authenticated
         expect(bodyElJq.addClass).not.toHaveBeenCalledWith(userLoggedClassName);
  
         // emit the event loginSuccess
-        $rootScope.$emit(AUTH_EVENTS.loginSuccess);
+        authService.loginSuccess.next(null);
  
         // and check now if the addClass was called passing the userLogged class
         // to the body Element
@@ -83,7 +91,6 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         let userLoggedClassName = BodyStateClassesService.USER_LOGGED_CLASSNAME;
  
         authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(true);
-        $rootScope = <any>helpers.mocks.scopeWithEvents();
  
         bodyElJq.addClass = jasmine.createSpy("addClass");
         bodyElJq.removeClass = jasmine.createSpy("removeClass");
@@ -95,11 +102,11 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         service.start();
  
         // check if the the body element addClass was called
-        // because the user is already authenticated  
+        // because the user is already authenticated
         expect(bodyElJq.addClass).toHaveBeenCalledWith(userLoggedClassName);
  
         // emit the event logoutSuccess
-        $rootScope.$emit(AUTH_EVENTS.logoutSuccess);
+        authService.logoutSuccess.next(null);
  
         // and check now if the removeClass was called passing the userLogged class
         // to the body Element
@@ -126,9 +133,48 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         expect(bodyEl.className).toEqual(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + currentStateName);
  
         // emit the event $stateChangeSuccess
-        $rootScope.$emit("$stateChangeSuccess", null, {name: "new-route"});
+        $rootScope.$emit("$stateChangeSuccess", null, { name: "new-route" });
  
         // and check now if the bodyEl has a class indicating the new state route
         expect(bodyEl.className).toEqual(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + "new-route");
     });
-});
 \ No newline at end of file
+
+    it("add a css class theme skin to body element", () => {
+        let service = getService();
+        let skinClass: string = 'skin-test';
+
+        bodyElJq.addClass = jasmine.createSpy("addClass");
+        bodyElJq.removeClass = jasmine.createSpy("removeClass");
+        service["bodyElement"] = bodyElJq;
+
+        service.start({
+            skin: skinClass
+        });
+
+        expect(bodyElJq.addClass).toHaveBeenCalledWith(skinClass);
+    });
+
+    it("add a css class to content wrapper element", () => {
+        let service = getService();
+
+        contentWrapperElJq.addClass = jasmine.createSpy("addClass");
+        contentWrapperElJq.removeClass = jasmine.createSpy("removeClass");
+
+        service["contentWrapperElement"] = contentWrapperElJq;
+        service.addContentClass(true);
+
+        expect(contentWrapperElJq.addClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
+    });
+
+    it("remove a css class from content wrapper element", () => {
+        let service = getService();
+
+        contentWrapperElJq.addClass = jasmine.createSpy("addClass");
+        contentWrapperElJq.removeClass = jasmine.createSpy("removeClass");
+
+        service["contentWrapperElement"] = contentWrapperElJq;
+        service.addContentClass(false);
+
+        expect(contentWrapperElJq.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
+    });
+});
 import {Directive, Inject, Injectable} from "ng-forward";
-import {AUTH_EVENTS} from "./../../login/auth-events";
+import {AuthEvents} from "./../../login/auth-events";
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
+
+export interface StartParams {
+    skin?: string;
+}
  
 /**
  * This is a service which adds classes to the body element
@@ -9,20 +14,26 @@ import {HtmlUtils} from &quot;../html-utils&quot;;
  * eg:
  *    User Logged:
  *         - noosfero-user-logged
- *    Route States: 
+ *    Route States:
  *         - noosfero-route-main
  *         - noosfero-route-main.profile.info
+ *
+ *    Show the all content in full mode:
+ *         - full-content
  */
 @Injectable()
 @Inject("$rootScope", "$document", "$state", AuthService)
 export class BodyStateClassesService {
  
     private started: boolean = false;
+    private skin: string;
  
     public static get USER_LOGGED_CLASSNAME(): string { return "noosfero-user-logged"; }
     public static get ROUTE_STATE_CLASSNAME_PREFIX(): string { return "noosfero-route-"; }
+    public static get CONTENT_WRAPPER_FULL(): string { return "full-content"; }
  
     private bodyElement: ng.IAugmentedJQuery = null;
+    private contentWrapperElement: INgForwardJQuery = null;
  
     constructor(
         private $rootScope: ng.IRootScopeService,
@@ -33,14 +44,37 @@ export class BodyStateClassesService {
  
     }
  
-    start() {
+    start(config?: StartParams) {
         if (!this.started) {
             this.setupUserLoggedClassToggle();
             this.setupStateClassToggle();
+
+            if (config) {
+                this.setThemeSkin(config.skin);
+            }
             this.started = true;
         }
     }
  
+    setThemeSkin(skin: string) {
+        this.getBodyElement().addClass(skin);
+    }
+
+    addContentClass(addClass: boolean, className?: string): BodyStateClassesService {
+
+        let fullContentClass: string = className || BodyStateClassesService.CONTENT_WRAPPER_FULL;
+        let contentWrapper = this.getContentWrapper();
+
+        if (contentWrapper) {
+            if (addClass) {
+                contentWrapper.addClass(fullContentClass);
+            } else {
+                contentWrapper.removeClass(fullContentClass);
+            }
+        }
+        return this;
+    }
+
     private getStateChangeSuccessHandlerFunction(bodyElement: ng.IAugmentedJQuery): (event: ng.IAngularEvent, toState: ng.ui.IState) => void {
         let self = this;
         return (event: ng.IAngularEvent, toState: ng.ui.IState) => {
@@ -65,7 +99,7 @@ export class BodyStateClassesService {
  
     /**
      * Setup the initial state of the user-logged css class
-     * and adds events handlers to switch this class when the login events happens 
+     * and adds events handlers to switch this class when the login events happens
      */
     private setupUserLoggedClassToggle() {
         let bodyElement = this.getBodyElement();
@@ -76,18 +110,18 @@ export class BodyStateClassesService {
             bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         }
  
-        // listen to the AUTH_EVENTS.loginSuccess and AUTH_EVENTS.logoutSuccess
-        // to switch the css class which indicates user logged in 
-        this.$rootScope.$on(AUTH_EVENTS.loginSuccess, () => {
+        // to switch the css class which indicates user logged in
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
             bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         });
-        this.$rootScope.$on(AUTH_EVENTS.logoutSuccess, () => {
+
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             bodyElement.removeClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         });
     }
  
     /**
-     * Returns the user 'body' html Element  
+     * Returns the user 'body' html Element
      */
     private getBodyElement(): ng.IAugmentedJQuery {
         if (this.bodyElement === null) {
@@ -95,4 +129,15 @@ export class BodyStateClassesService {
         }
         return this.bodyElement;
     }
-}
 \ No newline at end of file
+
+    private getContentWrapper(selector?: string): INgForwardJQuery {
+
+        if (this.contentWrapperElement === null) {
+
+            let doc = <INgForwardJQuery>angular.element(this.$document);
+            this.contentWrapperElement = doc.query(selector || '.content-wrapper');
+        }
+
+        return this.contentWrapperElement;
+    }
+}
@@ -0,0 +1,126 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: 'sidebar-section',
+    templateUrl: 'app/layout/sidebar/sidebar-section.html'
+})
+/**
+ * @ngdoc object
+ * @name sidebar.SidebarSectionComponent
+ * @description
+ *  This is a widget to render sections to
+ *  SidebarComponent.
+ *
+ * <b>Usage example:</b>
+ * @example
+ * <pre>
+ * let section: SidebarSectionComponent = new SidebarSectionComponent('MySection');
+ * section.addItem({
+ *    title: 'Friends',
+ *    count: 0,
+ *    url: '#',
+ *    className: 'active',
+ *    icon: 'fa-users', //A font-awesome icon class
+ *    subitems: [
+ *      { title: 'Example' }
+ *   ]
+ * });
+ * </pre>
+ */
+export class SidebarSectionComponent {
+
+    /**
+     * @ngdoc property
+     * @name name
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  The name of the section
+     */
+    @Input()
+    public name: string;
+
+    /**
+     * @ngdoc property
+     * @name items
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  Array of items to render into this sidebar menu
+     */
+    @Input()
+    public items: any[] = [
+        {
+            title: 'Friends',
+            count: 0,
+            url: '#',
+            className: 'active',
+            icon: 'fa-users'
+        }
+    ];
+
+    /**
+     * @ngdoc method
+     * @name constructor
+     * @methodOf sidebar.SidebarSectionComponent
+     * @param {string} name The name of the section (optional)
+     * @description
+     *  The constructor for this component. The name of section
+     *  can be assigned here, optionally
+     */
+    constructor(name?: string) {
+        this.name = name;
+    }
+
+    /**
+     * @ngdoc method
+     * @name addItem
+     * @methodOf sidebar.SidebarSectionComponent
+     * @param {Object} item Literal object with properties to render a menu item
+     * @returns {SidebarSectionComponent} This own component type, using the "Fluent Interface" pattern
+     * @description
+     *  Use this method to add new items for a section instance
+     *
+     * <b>Usage example:</b>
+     * @example
+     * <pre>
+     * section.addItem({
+     *    title: 'Friends',
+     *    count: 0,
+     *    url: '#',
+     *    className: 'active',
+     *    icon: 'fa-users', //A font-awesome icon class
+     *    subitems: [
+     *      { title: 'Example' } //A subitem literal object
+     *   ]
+     * });
+     * </pre>
+     */
+    addItem(item: any): SidebarSectionComponent {
+        this.items.push(item);
+        return this;
+    }
+
+    /**
+     * @ngdoc method
+     * @name setName
+     * @methodOf sidebar.SidebarSectionComponent
+     * @param {string} name The name of the section
+     * @returns {SidebarSectionComponent} This own component type, using the "Fluent Interface" pattern
+     * @description
+     *  Change the name of the section assigned on constructor
+     *
+     * <b>Usage example:</b>
+     * @example
+     * <pre>
+     * section.setName('MyAnotherSection')
+     *        .addItem({
+     *              //Item here
+     *              ...
+     *          });
+     * </pre>
+     */
+    setName(name: string): SidebarSectionComponent {
+        this.name = name;
+        return this;
+    }
+
+}
@@ -0,0 +1,21 @@
+<ul class="nav nav-pills nav-stacked">
+    <li class="nav-header nav-header-first hidden-sm hidden-xs">
+      {{ctrl.name}}
+    </li>
+
+    <li ng-click="widgetExpanded = !widgetExpanded" ng-repeat="item in ctrl.items" class="{{item.className}}">
+      <a href="{{item.url}}" class="dropdown-toggle">
+        <i class="fa {{item.icon}}"></i>
+        <span>{{item.title}}</span>
+        <span class="label label-primary label-circle pull-right" ng-class="{'submenu-count': item.subitems}" ng-show="item.count != undefined">{{item.count}}</span>
+        <i class="fa fa-angle-right drop-icon" ng-show="item.subitems"></i>
+      </a>
+      <ul class="submenu" ng-show="widgetExpanded && item.subitems">
+        <li ng-repeat="subitem in item.subitems">
+          <a href="{{subitem.url}}">
+            {{subitem.title}}
+          </a>
+        </li>
+      </ul>
+    </li>
+</ul>
@@ -0,0 +1,86 @@
+import {provide} from 'ng-forward';
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {SidebarComponent} from './sidebar.component';
+import {SidebarSectionComponent} from './sidebar-section.component';
+import * as helpers from '../../../spec/helpers';
+
+const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
+
+describe('Sidebar Component', () => {
+
+    let helper: ComponentTestHelper<SidebarComponent>;
+    let notifyService: any = {
+        event: Function,
+        subscribe: (fn: (visible: boolean) => void) => {
+            notifyService.event = fn;
+        },
+        next: (value: any) => {
+            notifyService.event(value);
+        },
+        setVisibility: (visible: boolean) => {
+            notifyService.event(visible);
+        }
+    };
+
+    let sessionService: any = {
+        currentUser: (): any => {
+            return {
+                person: { name: 'test' }
+            };
+        }
+    };
+
+
+    beforeEach(angular.mock.module("templates"));
+
+    beforeEach((done: Function) => {
+        providers((provide: any) => {
+            return <any>[
+                provide('SidebarNotificationService', {
+                    useValue: notifyService
+                }),
+                provide('SessionService', {
+                    useValue: sessionService
+                }),
+                provide('SidebarSectionComponent', {
+                    useValue: SidebarSectionComponent
+                })
+            ];
+        });
+
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [SidebarComponent],
+            properties: {
+                visible: false
+            }
+        });
+
+        helper = new ComponentTestHelper<SidebarComponent>(cls, done);
+    });
+
+    it('render the sidebar html content', () => {
+        expect(helper.all('div#nav-col').length).toEqual(1);
+    });
+
+    it('show sidebar only if a service emit a visibility event', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.component.isVisible()).toBeTruthy();
+    });
+
+    it('show user name into sidebar', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.component.user.name).toEqual(sessionService.currentUser().person.name);
+        expect(helper.debugElement.query('div.user-box .name a').text()).toMatch(sessionService.currentUser().person.name);
+    });
+
+    it('show sidebar section with a menu itens', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.debugElement.query('li.active a span').text()).toMatch('Friends');
+    });
+
+});
@@ -0,0 +1,104 @@
+import {Component, Inject, Input} from "ng-forward";
+import {SidebarNotificationService} from "./sidebar.notification.service";
+import {SessionService} from '../../login/session.service';
+import {SidebarSectionComponent} from './sidebar-section.component';
+
+@Component({
+    selector: 'sidebar',
+    templateUrl: 'app/layout/sidebar/sidebar.html',
+    directives: [SidebarSectionComponent]
+})
+@Inject(SidebarNotificationService, SessionService)
+/**
+ * @ngdoc object
+ * @name sidebar.SidebarComponent
+ * @requires [SidebarNotificationService, SessionService]
+ * @description
+ *  This is a widget to a sidebar with visible control.
+ *  Needs a SidebarSectionComponent to show sections/items/subitems
+ *  menu
+ *
+ * <b>Usage example:</b>
+ * @example
+ * <pre>
+ * let sidebar: SidebarComponent = new SidebarComponent(SidebarNotificationService, SessionService);
+ * sidebar.visible = true;
+ * </pre>
+ */
+export class SidebarComponent {
+
+    /**
+     * @ngdoc property
+     * @name visible
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  Controls if this component is show/hide
+     */
+    @Input()
+    private visible: boolean = false;
+
+    /**
+     * @ngdoc property
+     * @name showStatus
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  Controls the show/hide state of the circle user status
+     */
+    @Input('showstatus')
+    public showStatus: boolean = false;
+
+    /**
+     * @ngdoc property
+     * @name user
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  The user data to show into sidebar
+     */
+    @Input()
+    public user: { name: string } = {
+        name: ''
+    };
+
+    /**
+     * @ngdoc method
+     * @name constructor
+     * @methodOf sidebar.SidebarComponent
+     * @param {SidebarNotificationService} notificationService The service that emmits events to show/hide this component
+     * @param {SessionService} session The service that loads the user data when user is logged
+     * @description
+     *  The constructor for this component. Loads the dependencies services
+     */
+    constructor(private notificationService: SidebarNotificationService, private session: SessionService) { }
+
+    /**
+     * @ngdoc method
+     * @name ngOnInit
+     * @methodOf sidebar.SidebarComponent
+     * @description
+     *  Check the initial visibility when this component is loaded
+     */
+    ngOnInit() {
+
+        let userData: any = this.session.currentUser();
+        if (userData) {
+            this.user = userData.person;
+        }
+
+        this.notificationService.setVisibility(this.visible);
+        this.notificationService.subscribe((visible: boolean) => {
+            this.visible = visible;
+        });
+    }
+
+    /**
+     * @ngdoc method
+     * @name isVisible
+     * @methodOf sidebar.SidebarComponent
+     * @returns {boolean} True, whether this component is visible, otherwise returns false
+     * @description
+     *  Verify whether sidebar is visible or not
+     */
+    isVisible(): boolean {
+        return <boolean>this.visible;
+    }
+}
@@ -0,0 +1,23 @@
+<div id="nav-col" ng-show="ctrl.isVisible()" ng-class="{'sidebar-hide':!ctrl.isVisible()}">
+    <section id="col-left" class="col-left-nano">
+      <div id="col-left-inner" class="col-left-nano-content">
+        <div id="user-left-box" class="clearfix hidden-sm hidden-xs dropdown profile2-dropdown">
+          <noosfero-profile-image [profile]="ctrl.user"></noosfero-profile-image>
+          <div class="user-box">
+            <span class="name">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                {{ctrl.user.name}}
+              </a>
+            </span>
+            <span class="status" ng-show="ctrl.showStatus">
+              <i class="fa fa-circle"></i> {{ctrl.user.status}}
+            </span>
+          </div>
+        </div>
+
+        <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
+            <sidebar-section [name]='Navigation'></sidebar-section>
+        </div>
+      </div>
+    </section>
+  </div>
@@ -0,0 +1,27 @@
+import {Injectable, EventEmitter} from "ng-forward";
+
+
+@Injectable()
+export class SidebarNotificationService {
+    private alternateVisibilityEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
+    public sidebarVisible: boolean = false;
+
+    getCurrentVisibility() {
+        return this.sidebarVisible;
+    }
+
+    alternateVisibility() {
+        this.sidebarVisible = !this.sidebarVisible;
+        this.alternateVisibilityEvent.next(this.sidebarVisible);
+    }
+
+    setVisibility(visibility: boolean) {
+        this.sidebarVisible = visibility;
+        this.alternateVisibilityEvent.next(this.sidebarVisible);
+    }
+
+    subscribe(fn: (visible: boolean) => void) {
+        this.alternateVisibilityEvent.subscribe(fn);
+    }
+
+}
-export interface IAuthEvents {
-    loginSuccess: string;
-    loginFailed: string;
-    logoutSuccess: string;
+export enum AuthEvents {
+    loginSuccess, loginFailed, logoutSuccess
 }
-
-export const AUTH_EVENTS: IAuthEvents = {
-    loginSuccess: "auth-login-success",
-    loginFailed: "auth-login-failed",
-    logoutSuccess: "auth-logout-success"
-};
 \ No newline at end of file
-import {AuthService, AUTH_EVENTS} from "./";
+import {AuthService, AuthEvents} from "./";
+import {SessionService} from './session.service';
+
+import {Injectable, Provider, provide, EventEmitter} from "ng-forward";
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+import {getAngularServiceFactory, AngularServiceFactory} from "../../spec/helpers";
  
 describe("Services", () => {
  
@@ -15,23 +21,26 @@ describe(&quot;Services&quot;, () =&gt; {
             $translateProvider.translations('en', {});
         }));
  
-        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _$rootScope_: ng.IRootScopeService, _AuthService_: AuthService) => {
-            $httpBackend = _$httpBackend_;
-            authService = _AuthService_;
-            $rootScope = _$rootScope_;
+        beforeEach(() => {
  
             user = <noosfero.User>{
                 id: 1,
                 login: "user"
             };
-        }));
-
+        });
  
         describe("Succesffull login", () => {
  
+            let factory: AngularServiceFactory;
+            let authService: AuthService;
+            let $log: ng.ILogService;
+            let $http: ng.IHttpBackendService;
+
             beforeEach(() => {
                 credentials = { username: "user", password: "password" };
-
+                factory = getAngularServiceFactory();
+                authService = factory.getAngularService("AuthService");
+                $httpBackend = factory.getHttpBackendService();
                 $httpBackend.expectPOST("/api/v1/login", "login=user&password=password").respond(200, { user: user });
             });
  
@@ -44,20 +53,15 @@ describe(&quot;Services&quot;, () =&gt; {
                 expect($httpBackend.verifyNoOutstandingRequest());
             });
  
-
-            it("should emit event loggin successful with user logged data", () => {
-
-                authService.login(credentials);
-
-                let eventEmmited: boolean = false;
-                $rootScope.$on(AUTH_EVENTS.loginSuccess, (event: ng.IAngularEvent, userThroughEvent: noosfero.User) => {
-                    eventEmmited = true;
+            it("should emit event loggin successful with user logged data", (done: Function) => {
+                let successEvent: any = AuthEvents[AuthEvents.loginSuccess];
+                (<any>authService)[successEvent].subscribe((userThroughEvent: noosfero.User): any => {
                     expect(userThroughEvent).toEqual(user);
+                    done();
                 });
-
+                authService.login(credentials);
                 $httpBackend.flush();
  
-                expect(eventEmmited).toBeTruthy(AUTH_EVENTS.loginSuccess + " was not emmited!");
             });
  
             it("should return the current logged in user", () => {
@@ -74,6 +78,5 @@ describe(&quot;Services&quot;, () =&gt; {
             });
         });
  
-
     });
 });
-import {Injectable, Inject} from "ng-forward";
+import {Injectable, Inject, EventEmitter} from "ng-forward";
  
 import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces";
 import {SessionService} from "./session.service";
  
-import {AUTH_EVENTS, IAuthEvents} from "./auth-events";
+import {AuthEvents} from "./auth-events";
  
 @Injectable()
-@Inject("$q", "$http", "$rootScope", "SessionService", "$log", "AUTH_EVENTS")
+@Inject("$http", SessionService, "$log")
 export class AuthService {
  
-    constructor(private $q: ng.IQService,
-        private $http: ng.IHttpService,
-        private $rootScope: NoosferoRootScope,
-        private sessionService: SessionService,
-        private $log: ng.ILogService,
-        private auth_events: IAuthEvents) {
+    public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
+    public loginFailed: EventEmitter<ng.IHttpPromiseCallbackArg<any>> = new EventEmitter<ng.IHttpPromiseCallbackArg<any>>();
+    public logoutSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
  
+    constructor(private $http: ng.IHttpService,
+        private sessionService: SessionService,
+        private $log: ng.ILogService) {
     }
  
     loginFromCookie() {
@@ -27,8 +27,8 @@ export class AuthService {
     private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
         this.$log.debug('AuthService.login [SUCCESS] response', response);
         let currentUser: noosfero.User = this.sessionService.create(response.data);
-        this.$rootScope.currentUser = currentUser;
-        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
+        this.loginSuccess.next(currentUser);
+
         return currentUser;
     }
  
@@ -40,15 +40,15 @@ export class AuthService {
  
     private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
         this.$log.debug('AuthService.login [FAIL] response', response);
-        this.$rootScope.$broadcast(this.auth_events.loginFailed);
-        // return $q.reject(response);
+        this.loginFailed.next(response);
         return null;
     }
  
     public logout() {
+        let user: noosfero.User = this.sessionService.currentUser();
         this.sessionService.destroy();
-        this.$rootScope.currentUser = undefined;
-        this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
+
+        this.logoutSuccess.next(user);
         this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
     }
  
@@ -66,4 +66,14 @@ export class AuthService {
         }
         return (this.isAuthenticated() && authorizedRoles.indexOf(this.sessionService.currentUser().userRole) !== -1);
     }
-}
 \ No newline at end of file
+
+    subscribe(eventName: string, fn: Function) {
+
+        let event: EventEmitter<any> = <EventEmitter<any>>(<any>this)[eventName];
+        if (event) {
+            event.subscribe(fn);
+        } else {
+            throw new Error(`The event: ${eventName} not exists`);
+        }
+    }
+}
@@ -28,6 +28,8 @@ import {BodyStateClassesService} from &quot;./../layout/services/body-state-classes.s
  
 import {Navbar} from "../layout/navbar/navbar";
  
+import {SidebarComponent} from "../layout/sidebar/sidebar.component";
+
 import {MainBlockComponent} from "../layout/blocks/main-block/main-block.component";
 import {HtmlEditorComponent} from "../shared/components/html-editor/html-editor.component";
  
@@ -49,8 +51,13 @@ import {HtmlEditorComponent} from &quot;../shared/components/html-editor/html-editor.
 })
 @Inject(BodyStateClassesService)
 export class MainContentComponent {
+
+    public themeSkin: string = 'skin-whbl';
+
     constructor(private bodyStateClassesService: BodyStateClassesService) {
-        bodyStateClassesService.start();
+        bodyStateClassesService.start({
+            skin: this.themeSkin
+        });
     }
 }
  
@@ -84,7 +91,7 @@ export class EnvironmentContent {
         ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
         EnvironmentComponent, PeopleBlockComponent,
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
-        MainBlockComponent, RecentDocumentsBlockComponent, Navbar, ProfileImageBlockComponent,
+        MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent
     ],
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
 <acme-navbar></acme-navbar>
-<div ui-view="content"></div>
+<!-- Sidebar Left -->
+<sidebar [visible]="false"></sidebar>
+<div class="content-wrapper" ui-view="content"></div>
@@ -0,0 +1,7 @@
+.content-wrapper {
+    margin-top: 32px;
+}
+
+.full-content {
+  margin-left: 0px !important;
+}
-<span title="{{ctrl.profile.name}}">
+<span class="profile-image-wrap" title="{{ctrl.profile.name}}">
   <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
   <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
 </span>
@@ -6,12 +6,12 @@ import { ComponentFixture } from &#39;ng-forward/cjs/testing/test-component-builder&#39;
 /**
  * @ngdoc object
  * @name spec.ComponentTestHelper
- * @description
- *
+ * @description 
+ * 
  * Helper class for creating tests. It encapsulates the TestComponentBuilder initialization,
  * allowing the test to be DRY. To use, one must declare a beforeEach function in the
  * test, and inside construct this object like:
- *
+ * 
  * <pre>
  * let helper = let helper : ComponentTestHelper;
  * beforeEach( (done) => {
@@ -35,7 +35,7 @@ export class ComponentTestHelper&lt;T extends any&gt; {
      * @propertyOf spec.ComponentTestHelper
      * @description
      *  The NgForward TestComponentBuilder
-     */
+     */    
     tcb: TestComponentBuilder;
     /**
      * @ngdoc property
@@ -52,7 +52,7 @@ export class ComponentTestHelper&lt;T extends any&gt; {
      * @description
      *  The debugElement representing a JQuery element attached to the component
      * on mock page.
-     */
+     */    
     debugElement: INgForwardJQuery;
  
     /**
@@ -145,3 +145,4 @@ export function createClass({
     }
     return Test;
 }
+
@@ -73,6 +73,7 @@ class AngularServiceHookComponent {
     }
 }
  
+
 /**
  * This helper class allows get angular services to be used in integration tests
  * i.e: '$http', '$q', '$location', etc...
@@ -30,7 +30,7 @@ class ScopeWithEvents {
         }
     }
 }
-export var mocks = {
+export var mocks: any = {
     scopeWithEvents: (): ScopeWithEvents => new ScopeWithEvents(),
     modalInstance: {
         close: () => { }
@@ -41,7 +41,38 @@ export var mocks = {
         }
     },
     authService: {
-        logout: () => { }
+        loginSuccess: {
+            event: Function,
+            subscribe: (fn: Function) => {
+                mocks.authService['loginSuccess'].event = fn;
+            },
+            next: (param: any) => {
+                mocks.authService['loginSuccess'].event(param);
+            }
+        },
+        loginFailed: {
+            event: Function,
+            subscribe: (fn: Function) => {
+                mocks.authService['loginFailed'].event = fn;
+            },
+            next: (param: any) => {
+                mocks.authService['loginFailed'].event(param);
+            }
+        },
+        logoutSuccess: {
+            event: Function,
+            subscribe: (fn: Function) => {
+                mocks.authService['logoutSuccess'].event = fn;
+            },
+            next: (param: any) => {
+                mocks.authService['logoutSuccess'].event(param);
+            }
+        },
+        logout: () => { },
+        subscribe: (eventName: string, fn: Function) => {
+            mocks.authService[eventName].subscribe(fn);
+        },
+        isAuthenticated: () => { }
     },
     articleService: {
         getByProfile: (profileId: number, params?: any) => {
...	...	@@ -28,12 +28,16 @@ $primary-color-dark: #0288d1;
28	28	$default-bg-hover-color: #f8f8f8;
29	29	$red-color: #e84e40;
30	30	$red-color-dark: #dd191d;
	31	+$green-color: #8bc34a;
	32	+$green-color-dark: #689f38;
31	33
32	34	//GRID - media queries breakpoints
33	35	$break-xxs-min: 420px;
34	36	$break-xs-min: 768px;
	37	+$break-sm-min: 992px;
35	38
36	39	$break-xxs-max: ($break-xxs-min - 1);
	40	+$break-sm-max: ($break-sm-min - 1);
37	41	$break-xs-max: ($break-xs-min - 1);
38	42
39	43
...	...	@@ -76,4 +80,5 @@ h1, h2, h3, h4, h5 {
76	80	@import "layout/scss/mixins";
77	81	@import "layout/scss/bootstrap-overrides";
78	82	@import "layout/scss/layout";
	83	+@import "layout/scss/sidebar";
79	84	@import "layout/scss/tables";
...	...
...	...	@@ -5,7 +5,7 @@ import {noosferoAngularRunBlock} from "./index.run";
5	5	import {MainComponent} from "./main/main.component";
6	6	import {bootstrap, bundle} from "ng-forward";
7	7
8		-import {AUTH_EVENTS} from "./login/auth-events";
	8	+import {AuthEvents} from "./login/auth-events";
9	9	import {AuthController} from "./login/auth.controller";
10	10
11	11	import {Navbar} from "./layout/navbar/navbar";
...	...	@@ -23,7 +23,7 @@ NoosferoApp.angularModule = noosferoApp;
23	23
24	24
25	25	NoosferoApp.addConstants("moment", moment);
26		-NoosferoApp.addConstants("AUTH_EVENTS", AUTH_EVENTS);
	26	+NoosferoApp.addConstants("AuthEvents", AuthEvents);
27	27
28	28	NoosferoApp.addConfig(noosferoModuleConfig);
29	29	NoosferoApp.run(noosferoAngularRunBlock);
...	...
...	...	@@ -39,8 +39,8 @@ describe("Components", () => {
39	39	});
40	40
41	41	/**
42		- * By default the helper will have the component, with all properties
43		- * ready to be used. Here the mock provider 'EnvironmentService' will
	42	+ * By default the helper will have the component, with all properties
	43	+ * ready to be used. Here the mock provider 'EnvironmentService' will
44	44	* return the given array with one person.
45	45	*/
46	46	it("get block with one people", () => {
...	...
...	...	@@ -7,7 +7,6 @@ import {
7	7	quickCreateComponent,
8	8	provideEmptyObjects,
9	9	createProviderToValue,
10		- getAngularServiceFactory,
11	10	provideFilters
12	11	} from "../../../spec/helpers";
13	12
...	...
1	1	<nav class="navbar navbar-static-top navbar-inverse">
2	2	<div class="container-fluid">
3	3	<div class="navbar-header">
4		- <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
	4	+ <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()" ng-show="ctrl.showHamburguer">
5	5	<span class="sr-only">{{"navbar.toggle_menu" \| translate}}</span>
6		- <span class="icon-bar"></span>
7		- <span class="icon-bar"></span>
8		- <span class="icon-bar"></span>
	6	+ <i class="fa fa-bars"></i>
9	7	</button>
10	8	<a class="navbar-brand" ui-sref="main.environment.home">
11		- <span class="noosfero-logo"> </span>
	9	+ <span class="noosfero-logo"> </span>
12	10	<span class="noosfero-name">{{"noosfero.name" \| translate}}</span>
13	11	</a>
14	12	</div>
...	...
1	1	.navbar {
2	2
	3	+ margin-bottom: 0px;
	4	+
3	5	.container-fluid {
4		- padding-right: 12%;
5		- padding-left: 12%;
6		- @media (max-width: 978px) {
7		- padding-right: 2%;
8		- padding-left: 2%;
9		- }
10	6
11	7	.navbar-brand {
12	8	.noosfero-logo {
13		- background:url("../assets/images/logo-noosfero.png") no-repeat;
	9	+ background: url("../assets/images/logo-noosfero.png") no-repeat;
14	10	padding: 0px 62px 64px 15px;
15	11	}
16	12	}
...	...	@@ -28,5 +24,19 @@
28	24	}
29	25	}
30	26	}
	27	+
	28	+ .navbar-toggle {
	29	+ display: block;
	30	+ color: #fff;
	31	+ padding: 4px 12px;
	32	+ margin: 10px 10px;
	33	+ text-align: center;
	34	+ }
	35	+
	36	+ @media (max-width: $break-sm-max) {
	37	+ .navbar-toggle .fa-bars{
	38	+ font-size: 14pt;
	39	+ }
	40	+ }
31	41	}
32	42	}
...	...
1	1	import * as helpers from "./../../../spec/helpers";
2	2	import {Navbar} from "./navbar";
3	3
4		-import {Injectable, Provider, provide} from "ng-forward";
	4	+import {Injectable, Provider, provide, EventEmitter} from "ng-forward";
5	5
6	6	import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
7	7
8		-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
	8	+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
9	9
	10	+import events from 'ng-forward/cjs/events/events';
10	11
11	12	describe("Components", () => {
12	13
...	...	@@ -53,22 +54,19 @@ describe("Components", () => {
53	54	provide('$uibModal', {
54	55	useValue: $modal
55	56	}),
56		- provide('AuthService', {
	57	+ provide(AuthService, {
57	58	useValue: authService
58	59	}),
59	60	helpers.provideEmptyObjects('moment'),
60	61	provide('$state', {
61	62	useValue: stateService
62	63	}),
63		- provide("$scope", {
64		- useValue: scope
65		- }),
66	64	provide('SessionService', {
67	65	useValue: sessionService
68	66	}),
69		- provide('AUTH_EVENTS', {
	67	+ provide('AuthEvents', {
70	68	useValue: {
71		- AUTH_EVENTS
	69	+ AuthEvents
72	70	}
73	71	}),
74	72	provide('TranslatorService', {
...	...	@@ -146,7 +144,7 @@ describe("Components", () => {
146	144
147	145
148	146	it('closes the modal after login', (done: Function) => {
149		- modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
	147	+ modalInstance = {};
150	148	modalInstance.close = jasmine.createSpy("close");
151	149
152	150	$modal.open = () => {
...	...	@@ -155,19 +153,21 @@ describe("Components", () => {
155	153
156	154	buildComponent().then((fixture: ComponentFixture) => {
157	155	let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
158		- let localScope: ng.IScope = navbarComp["$scope"];
159	156
160	157	navbarComp.openLogin();
161		- localScope.$emit(AUTH_EVENTS.loginSuccess);
	158	+ let successEvent: string = AuthEvents[AuthEvents.loginSuccess];
	159	+
	160	+ (<any>navbarComp.authService)[successEvent].next(user);
	161	+
162	162	expect(modalInstance.close).toHaveBeenCalled();
163	163	done();
164	164	});
	165	+
165	166	});
166	167
167	168	it('updates current user on logout', (done: Function) => {
168	169	buildComponent().then((fixture: ComponentFixture) => {
169	170	let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
170		- let localScope: ng.IScope = navbarComp["$scope"];
171	171
172	172	// init navbar currentUser with some user
173	173	navbarComp["currentUser"] = user;
...	...	@@ -176,12 +176,14 @@ describe("Components", () => {
176	176	// and emmit the 'logoutSuccess' event
177	177	// just what happens when user logsout
178	178	sessionService.currentUser = () => { return null; };
179		- localScope.$emit(AUTH_EVENTS.logoutSuccess);
180		- expect(navbarComp["currentUser"]).toBeNull();
	179	+ let successEvent: string = AuthEvents[AuthEvents.logoutSuccess];
	180	+
	181	+ (<any>navbarComp.authService)[successEvent].next(user);
	182	+
181	183	done();
	184	+ expect(navbarComp["currentUser"]).toBeNull();
	185	+
182	186	});
183	187	});
184		-
185		-
186	188	});
187	189	});
...	...
1		-import {Component, Inject} from "ng-forward";
	1	+import {Component, Inject, EventEmitter, Input} from "ng-forward";
2	2	import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
3		-
4		-
5		-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
	3	+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
	4	+import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
	5	+import {BodyStateClassesService} from '../services/body-state-classes.service';
6	6
7	7	@Component({
8	8	selector: "acme-navbar",
9	9	templateUrl: "app/layout/navbar/navbar.html",
10	10	directives: [LanguageSelectorComponent],
11		- providers: [AuthService, SessionService]
	11	+ providers: [AuthService, SessionService, SidebarNotificationService]
12	12	})
13		-@Inject("$uibModal", AuthService, "SessionService", "$scope", "$state")
	13	+@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService)
14	14	export class Navbar {
15	15
16	16	private currentUser: noosfero.User;
17	17	private modalInstance: any = null;
	18	+
	19	+ public showHamburguer: boolean = false;
	20	+
18	21	/**
19	22	*
20	23	*/
21	24	constructor(
22	25	private $uibModal: any,
23		- private authService: AuthService,
	26	+ public authService: AuthService,
24	27	private session: SessionService,
25		- private $scope: ng.IScope,
26		- private $state: ng.ui.IStateService
	28	+ private $state: ng.ui.IStateService,
	29	+ private sidebarNotificationService: SidebarNotificationService,
	30	+ private bodyStateService: BodyStateClassesService
27	31	) {
28	32	this.currentUser = this.session.currentUser();
29	33
30		- this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
	34	+ this.showHamburguer = this.authService.isAuthenticated();
	35	+ this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
	36	+
	37	+ this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
31	38	if (this.modalInstance) {
32	39	this.modalInstance.close();
33	40	this.modalInstance = null;
34	41	}
35	42
36		- this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
	43	+ this.currentUser = this.session.currentUser();
	44	+ this.showHamburguer = true;
	45	+
	46	+ this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
37	47	});
38	48
39		- this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
	49	+ this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
40	50	this.currentUser = this.session.currentUser();
41	51	});
	52	+
	53	+ }
	54	+
	55	+ public toggleCollapse() {
	56	+ this.sidebarNotificationService.alternateVisibility();
	57	+
	58	+ this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
42	59	}
43	60
44	61	openLogin() {
...	...	@@ -55,8 +72,6 @@ export class Navbar {
55	72	this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
56	73	};
57	74
58		-
59		-
60	75	activate() {
61	76	if (!this.currentUser) {
62	77	this.openLogin();
...	...
...	...	@@ -54,3 +54,19 @@
54	54	.tabs-wrapper.tabs-no-header .tab-content {
55	55	padding: 0 20px 20px;
56	56	}
	57	+
	58	+/* LABELS */
	59	+.label {
	60	+ @include border-radius($border-radius-base);
	61	+ font-size: 0.875em;
	62	+ font-weight: 600;
	63	+}
	64	+.label-default,
	65	+.label.label-large {
	66	+ font-size: 1em;
	67	+ padding: 0.4em 0.8em 0.5em;
	68	+}
	69	+.label.label-circle {
	70	+ @include border-radius(50%);
	71	+ padding: 4px !important;
	72	+}
...	...
...	...	@@ -0,0 +1,311 @@
	1	+#col-left {
	2	+ position: relative;
	3	+ color: #003940;
	4	+ height: 100%;
	5	+
	6	+ a {
	7	+ color: #e1e1e1;
	8	+ }
	9	+ a:hover,
	10	+ .nav-active a.nav-link,
	11	+ a.active {
	12	+ color: #fff;
	13	+ }
	14	+ * {
	15	+ outline: none;
	16	+ }
	17	+}
	18	+#nav-col {
	19	+ padding: 0;
	20	+ z-index: 100;
	21	+ position: absolute;
	22	+ background: #2c3e50;
	23	+ width: 220px;
	24	+ border-right: 2px solid #e7ebee;
	25	+ height: 200%;
	26	+
	27	+ @media (max-width: $break-sm-max) {
	28	+ position: relative;
	29	+ width: auto;
	30	+ }
	31	+}
	32	+#sidebar-nav {
	33	+ max-height: 100%;
	34	+ padding-left: 0;
	35	+ padding-right: 0;
	36	+
	37	+ .nav {
	38	+ > li {
	39	+ margin: 0;
	40	+
	41	+ &.nav-header {
	42	+ color: lighten(#2c3e50, 40%);
	43	+ font-size: 0.8em;
	44	+ padding: 12px 15px 6px 14px;
	45	+ border-top: 2px solid darken(#2c3e50, 4%);
	46	+
	47	+ &.nav-header-first {
	48	+ padding-top: 4px;
	49	+ border-top: 0;
	50	+ }
	51	+ }
	52	+
	53	+ > a {
	54	+ color: #fff;
	55	+ height: 44px;
	56	+ line-height: 28px;
	57	+ @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s);
	58	+ overflow: hidden;
	59	+ padding: 8px 15px 8px 20px;
	60	+ border-left: 0 solid transparent;
	61	+
	62	+ &:hover {
	63	+ border-left-color: $primary-color;
	64	+ }
	65	+ > i {
	66	+ position: absolute;
	67	+ margin-top: 6px;
	68	+ }
	69	+ > span {
	70	+ margin-left: 35px;
	71	+ font-size: 0.875em;
	72	+ font-weight: 700;
	73	+
	74	+ &.label {
	75	+ font-size: 0.75em;
	76	+ margin: 5px 0 0 0;
	77	+ padding: 4px 0.6em;
	78	+ }
	79	+ &.label.label-circle {
	80	+ margin-right: 5px;
	81	+ }
	82	+ }
	83	+ }
	84	+ &.open > a {
	85	+ border-bottom-color: #252525;
	86	+ outline: none;
	87	+ text-decoration: none;
	88	+ }
	89	+ &.active > .submenu > li.active > .submenu {
	90	+ display: block;
	91	+ }
	92	+ }
	93	+ li {
	94	+ @import "sidebar/submenu";
	95	+
	96	+ &.active > .submenu {
	97	+ display: block;
	98	+ }
	99	+ }
	100	+ }
	101	+}
	102	+.navbar-nav .open .dropdown-menu {
	103	+ background-color: #FFFFFF;
	104	+ border: none;
	105	+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
	106	+ position: absolute;
	107	+}
	108	+#user-left-box {
	109	+ padding: 20px 15px 20px 25px;
	110	+
	111	+ img {
	112	+ @include border-radius(18%);
	113	+ border: 3px solid #fff;
	114	+ float: left;
	115	+ width: 70px;
	116	+ }
	117	+ .user-box {
	118	+ color: #fff;
	119	+ float: left;
	120	+ padding-left: 15px;
	121	+ padding-top: 18px;
	122	+
	123	+ > .name {
	124	+ display: block;
	125	+ font-size: 1em;
	126	+ font-weight: 600;
	127	+ line-height: 1.2;
	128	+
	129	+ > a {
	130	+ color: #fff;
	131	+
	132	+ &:hover,
	133	+ &:focus {
	134	+ color: #E1E1E1;
	135	+ text-decoration: none;
	136	+ }
	137	+ }
	138	+ }
	139	+ > .status {
	140	+ display: block;
	141	+ font-size: 0.75em;
	142	+ padding-top: 3px;
	143	+ }
	144	+ > .status > i {
	145	+ color: $green-color;
	146	+ margin-right: 4px;
	147	+ }
	148	+ }
	149	+ &.dropdown {
	150	+ .dropdown-menu {
	151	+ top: 55px;
	152	+ left: 30px;
	153	+
	154	+ a {
	155	+ color: #707070;
	156	+ font-size: 0.875em;
	157	+
	158	+ &:hover {
	159	+ background-color: #f6f6f6;
	160	+ color: #707070;
	161	+ }
	162	+ }
	163	+ }
	164	+ }
	165	+}
	166	+@media (min-width: $break-sm-min) {
	167	+ .nav-small {
	168	+ #nav-col {
	169	+ width: 64px;
	170	+ }
	171	+ #content-wrapper {
	172	+ margin-left: 64px;
	173	+ }
	174	+ #nav-col {
	175	+ #user-left-box {
	176	+ display: none;
	177	+ }
	178	+ #sidebar-nav {
	179	+ .nav > li > a {
	180	+ padding-left: 15px !important;
	181	+ padding-right: 15px;
	182	+ text-align: center;
	183	+
	184	+ > i {
	185	+ position: relative;
	186	+ font-size: 1.25em;
	187	+ }
	188	+ > span {
	189	+ display: none;
	190	+ }
	191	+ }
	192	+ .nav > li.nav-header {
	193	+ display: none;
	194	+ }
	195	+ .nav li > a.dropdown-toggle > .drop-icon {
	196	+ display: none;
	197	+ }
	198	+ .nav .submenu > li > a.dropdown-toggle > .drop-icon {
	199	+ display: block;
	200	+ }
	201	+ .nav li .submenu {
	202	+ left: 64px;
	203	+ position: absolute;
	204	+ top: 0;
	205	+ width: 210px;
	206	+
	207	+ > li > a {
	208	+ padding-left: 28px;
	209	+ }
	210	+ }
	211	+ .nav > .active > .submenu > li > .submenu {
	212	+ left: auto;
	213	+ position: relative;
	214	+ top: auto;
	215	+ width: 100%;
	216	+
	217	+ a {
	218	+ padding-left: 48px
	219	+ }
	220	+ }
	221	+ }
	222	+ }
	223	+
	224	+ #nav-col-submenu {
	225	+ @import "sidebar/submenu";
	226	+
	227	+ .submenu {
	228	+ position: absolute;
	229	+ top: 60px;
	230	+ left: 64px;
	231	+ width: 210px;
	232	+
	233	+ > li > a {
	234	+ padding-left: 28px;
	235	+
	236	+ &.dropdown-toggle > .drop-icon {
	237	+ display: block;
	238	+ }
	239	+ }
	240	+ }
	241	+ > .submenu {
	242	+ display: block !important;
	243	+ }
	244	+ .submenu > li > .submenu,
	245	+ .submenu > li > .submenu {
	246	+ left: auto;
	247	+ position: relative;
	248	+ top: auto;
	249	+ width: 100%;
	250	+
	251	+ a {
	252	+ padding-left: 48px
	253	+ }
	254	+ }
	255	+ }
	256	+ }
	257	+}
	258	+@media (max-width: $break-sm-max) {
	259	+
	260	+ #sidebar-nav.navbar-collapse {
	261	+ max-height: 336px;
	262	+ }
	263	+}
	264	+
	265	+/* Extracted from original _header.scss */
	266	+#sidebar-nav .nav a {
	267	+ > i {
	268	+ font-size: 1.125em;
	269	+ }
	270	+ > .open > &, .open > &:focus {
	271	+ background: inherit;
	272	+ }
	273	+ &:hover, .open > &:hover {
	274	+ background: darken(#2c3e50, 4%);
	275	+ color: #fff;
	276	+ outline: none;
	277	+ }
	278	+}
	279	+
	280	+#sidebar-nav .nav-pills > li.active > a,
	281	+#sidebar-nav .nav-pills > li.active > a:hover,
	282	+#sidebar-nav .nav-pills > li.active > a:focus,
	283	+.nav-pills > li.open > a,
	284	+.nav-pills > li.open > a:hover,
	285	+.nav-pills > li.open > a:focus,
	286	+#sidebar-nav .nav-pills > li.open > a,
	287	+#sidebar-nav .nav-pills > li.open > a:hover,
	288	+#sidebar-nav .nav-pills > li > a:focus,
	289	+.nav-small #nav-col #sidebar-nav .nav-pills > li.open > a {
	290	+ background-color: darken(#2c3e50, 4%);
	291	+ color: #fff;
	292	+ border-left-color: $primary-color;
	293	+}
	294	+
	295	+#user-left-box {
	296	+ .profile-image-wrap {
	297	+ float:left;
	298	+ width: 70px;
	299	+ height: 70px;
	300	+ }
	301	+ i.profile-image {
	302	+ border-radius: 18%;
	303	+ border: 3px solid #fff;
	304	+ background-color: #fff;
	305	+ text-align: center;
	306	+ }
	307	+}
	308	+
	309	+.submenu-count {
	310	+ margin-right: 20px !important;
	311	+}
...	...