From e59add5d463dc82869a146b91e52fd58cb178b63 Mon Sep 17 00:00:00 2001
From: Michel Felipe <mfelipeof@gmail.com>
Date: Fri, 8 Apr 2016 11:40:58 -0300
Subject: [PATCH] Created sidebar component with sass and a service to show/hide using Angular 2 EventEmitter sintax

---
 src/app/index.scss                                     |   5 +++++
 src/app/layout/navbar/navbar.html                      |   6 ++----
 src/app/layout/navbar/navbar.scss                      |  24 +++++++++++++++++-------
 src/app/layout/navbar/navbar.ts                        |  17 +++++++++++------
 src/app/layout/scss/_bootstrap-overrides.scss          |  16 ++++++++++++++++
 src/app/layout/scss/_sidebar.scss                      | 291 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/layout/scss/sidebar/_submenu.scss              |  52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/layout/sidebar/sidebar.component.ts            |  23 +++++++++++++++++++++++
 src/app/layout/sidebar/sidebar.html                    |  65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/layout/sidebar/sidebar.notification.service.ts |  27 +++++++++++++++++++++++++++
 src/app/main/main.component.ts                         |   4 +++-
 src/app/main/main.html                                 |   4 +++-
 src/app/main/main.scss                                 |   3 +++
 13 files changed, 518 insertions(+), 19 deletions(-)
 create mode 100644 src/app/layout/scss/_sidebar.scss
 create mode 100644 src/app/layout/scss/sidebar/_submenu.scss
 create mode 100644 src/app/layout/sidebar/sidebar.component.ts
 create mode 100644 src/app/layout/sidebar/sidebar.html
 create mode 100644 src/app/layout/sidebar/sidebar.notification.service.ts
 create mode 100644 src/app/main/main.scss

diff --git a/src/app/index.scss b/src/app/index.scss
index 685f48e..8435161 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -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";
diff --git a/src/app/layout/navbar/navbar.html b/src/app/layout/navbar/navbar.html
index 71c30f7..f8ed57c 100644
--- a/src/app/layout/navbar/navbar.html
+++ b/src/app/layout/navbar/navbar.html
@@ -1,11 +1,9 @@
 <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()">
         <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> 
diff --git a/src/app/layout/navbar/navbar.scss b/src/app/layout/navbar/navbar.scss
index f27bd0d..4b52e9d 100644
--- a/src/app/layout/navbar/navbar.scss
+++ b/src/app/layout/navbar/navbar.scss
@@ -1,16 +1,12 @@
 .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;
+    	}
+    }
   }
 }
diff --git a/src/app/layout/navbar/navbar.ts b/src/app/layout/navbar/navbar.ts
index a6ce473..e0133ef 100644
--- a/src/app/layout/navbar/navbar.ts
+++ b/src/app/layout/navbar/navbar.ts
@@ -1,16 +1,15 @@
-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 {SidebarNotificationService} from "../sidebar/sidebar.notification.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", "$scope", "$state", SidebarNotificationService)
 export class Navbar {
 
     private currentUser: noosfero.User;
@@ -23,7 +22,8 @@ export class Navbar {
         private authService: AuthService,
         private session: SessionService,
         private $scope: ng.IScope,
-        private $state: ng.ui.IStateService
+        private $state: ng.ui.IStateService,
+        private sidebarNotificationService: SidebarNotificationService
     ) {
         this.currentUser = this.session.currentUser();
 
@@ -39,6 +39,11 @@ export class Navbar {
         this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
             this.currentUser = this.session.currentUser();
         });
+
+    }
+
+    public toggleCollapse() {
+        this.sidebarNotificationService.alternateVisibility();
     }
 
     openLogin() {
diff --git a/src/app/layout/scss/_bootstrap-overrides.scss b/src/app/layout/scss/_bootstrap-overrides.scss
index 07881b1..ee5f5f7 100644
--- a/src/app/layout/scss/_bootstrap-overrides.scss
+++ b/src/app/layout/scss/_bootstrap-overrides.scss
@@ -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;
+}
diff --git a/src/app/layout/scss/_sidebar.scss b/src/app/layout/scss/_sidebar.scss
new file mode 100644
index 0000000..179f65e
--- /dev/null
+++ b/src/app/layout/scss/_sidebar.scss
@@ -0,0 +1,291 @@
+#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;
+
+	@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;
+}
diff --git a/src/app/layout/scss/sidebar/_submenu.scss b/src/app/layout/scss/sidebar/_submenu.scss
new file mode 100644
index 0000000..09c278d
--- /dev/null
+++ b/src/app/layout/scss/sidebar/_submenu.scss
@@ -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%);
+		}
+	}
+}
diff --git a/src/app/layout/sidebar/sidebar.component.ts b/src/app/layout/sidebar/sidebar.component.ts
new file mode 100644
index 0000000..ff1fae8
--- /dev/null
+++ b/src/app/layout/sidebar/sidebar.component.ts
@@ -0,0 +1,23 @@
+import {Component, Inject, Input} from "ng-forward";
+import {SidebarNotificationService} from "./sidebar.notification.service";
+
+@Component({
+    selector: 'sidebar',
+    templateUrl: 'app/layout/sidebar/sidebar.html'
+})
+@Inject(SidebarNotificationService)
+export class SidebarComponent {
+
+    @Input('visible')
+    private isVisible: boolean = false;
+
+    constructor(private notificationService: SidebarNotificationService) { }
+
+    ngOnInit() {
+
+        this.notificationService.setVisibility(this.isVisible);
+        this.notificationService.subscribe((visible) => {
+            this.isVisible = visible;
+        })
+    }
+}
diff --git a/src/app/layout/sidebar/sidebar.html b/src/app/layout/sidebar/sidebar.html
new file mode 100644
index 0000000..3f9338d
--- /dev/null
+++ b/src/app/layout/sidebar/sidebar.html
@@ -0,0 +1,65 @@
+<div id="nav-col" ng-show="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.profile"></noosfero-profile-image>
+          <div class="user-box">
+            <span class="name">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                Scarlett J.
+                <i class="fa fa-angle-down"></i>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>
+                <li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
+                <li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
+                <li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
+              </ul>
+            </span>
+            <span class="status">
+              <i class="fa fa-circle"></i> Online
+            </span>
+          </div>
+        </div>
+
+        <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
+            <ul class="nav nav-pills nav-stacked">
+              <li class="nav-header nav-header-first hidden-sm hidden-xs">
+                Navigation
+              </li>
+              <li class="active">
+                <a href="index.html">
+                  <i class="fa fa-dashboard"></i>
+                  <span>Dashboard</span>
+                  <span class="label label-primary label-circle pull-right">28</span>
+                </a>
+              </li>
+              <li ng-click="widgetExpanded = !widgetExpanded">
+                  <a href="#" class="dropdown-toggle">
+                    <i class="fa fa-table"></i>
+                    <span>Tables</span>
+                    <i class="fa fa-angle-right drop-icon"></i>
+                  </a>
+                  <ul class="submenu" ng-show="widgetExpanded">
+                    <li>
+                      <a href="tables.html">
+                        Simple
+                      </a>
+                    </li>
+                    <li>
+                      <a href="tables-advanced.html">
+                        Advanced
+                      </a>
+                    </li>
+                    <li>
+                      <a href="users.html">
+                        Users
+                      </a>
+                    </li>
+                  </ul>
+              </li>
+            </ul>
+          </div>
+      </div>
+    </section>
+  </div>
diff --git a/src/app/layout/sidebar/sidebar.notification.service.ts b/src/app/layout/sidebar/sidebar.notification.service.ts
new file mode 100644
index 0000000..5bd1d2a
--- /dev/null
+++ b/src/app/layout/sidebar/sidebar.notification.service.ts
@@ -0,0 +1,27 @@
+import {Injectable, EventEmitter} from "ng-forward";
+
+
+@Injectable()
+export class SidebarNotificationService {
+    private alternateVisibilityEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
+    private 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);
+    }
+
+}
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index d4e9d8e..a2c593e 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -28,6 +28,8 @@ import {BodyStateClassesService} from "./../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";
 
@@ -84,7 +86,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]
diff --git a/src/app/main/main.html b/src/app/main/main.html
index 6a7ff04..b735584 100644
--- a/src/app/main/main.html
+++ b/src/app/main/main.html
@@ -1,2 +1,4 @@
 <acme-navbar></acme-navbar>
-<div ui-view="content"></div>
+<!-- Sidebar Left -->
+<sidebar [visible]="true"></sidebar>
+<div class="content" ui-view="content"></div>
diff --git a/src/app/main/main.scss b/src/app/main/main.scss
new file mode 100644
index 0000000..89f9d0c
--- /dev/null
+++ b/src/app/main/main.scss
@@ -0,0 +1,3 @@
+.content {
+    margin-top: 32px;
+}
--
libgit2 0.21.2