diff --git a/src/app/layout/services/body-state-classes.service.ts b/src/app/layout/services/body-state-classes.service.ts
index f24db47..944615a 100644
--- a/src/app/layout/services/body-state-classes.service.ts
+++ b/src/app/layout/services/body-state-classes.service.ts
@@ -17,6 +17,9 @@ export interface StartParams {
  *    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)
diff --git a/src/app/layout/sidebar/sidebar-section.component.ts b/src/app/layout/sidebar/sidebar-section.component.ts
new file mode 100644
index 0000000..e27126f
--- /dev/null
+++ b/src/app/layout/sidebar/sidebar-section.component.ts
@@ -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;
+    }
+
+}
diff --git a/src/app/layout/sidebar/sidebar-section.html b/src/app/layout/sidebar/sidebar-section.html
new file mode 100644
index 0000000..880275d
--- /dev/null
+++ b/src/app/layout/sidebar/sidebar-section.html
@@ -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>
diff --git a/src/app/layout/sidebar/sidebar-sections.component.ts b/src/app/layout/sidebar/sidebar-sections.component.ts
deleted file mode 100644
index e34f90d..0000000
--- a/src/app/layout/sidebar/sidebar-sections.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {Component, Inject, Input} from "ng-forward";
-
-@Component({
-    selector: 'sidebar-sections',
-    templateUrl: 'app/layout/sidebar/sidebar-sections.html'
-})
-
-//@Inject('translateFilter')
-export class SidebarSectionsComponent {
-
-    @Input()
-    public items: any[] = [
-        {
-            title: 'Friends',
-            count: 0,
-            url: '#',
-            className: 'active',
-            icon: 'fa-users',
-            subitems: [
-                { title: 'Example' }
-            ]
-        }
-    ];
-
-    addItem(item: any): SidebarSectionsComponent {
-        this.items.push(item);
-        return this;
-    }
-
-}
diff --git a/src/app/layout/sidebar/sidebar-sections.html b/src/app/layout/sidebar/sidebar-sections.html
deleted file mode 100644
index d90067b..0000000
--- a/src/app/layout/sidebar/sidebar-sections.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<ul class="nav nav-pills nav-stacked">
-    <li class="nav-header nav-header-first hidden-sm hidden-xs">
-      Navigation
-    </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>
diff --git a/src/app/layout/sidebar/sidebar.component.spec.ts b/src/app/layout/sidebar/sidebar.component.spec.ts
index c5f44bf..74b6564 100644
--- a/src/app/layout/sidebar/sidebar.component.spec.ts
+++ b/src/app/layout/sidebar/sidebar.component.spec.ts
@@ -2,7 +2,7 @@ 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 {SidebarSectionsComponent} from './sidebar-sections.component';
+import {SidebarSectionComponent} from './sidebar-section.component';
 import * as helpers from '../../../spec/helpers';
 
 const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
@@ -43,8 +43,8 @@ describe('Sidebar Component', () => {
                 provide('SessionService', {
                     useValue: sessionService
                 }),
-                provide('SidebarSectionsComponent', {
-                    useValue: SidebarSectionsComponent
+                provide('SidebarSectionComponent', {
+                    useValue: SidebarSectionComponent
                 })
             ];
         });
@@ -81,7 +81,6 @@ describe('Sidebar Component', () => {
 
         notifyService.setVisibility(true);
         expect(helper.debugElement.query('li.active a span').text()).toMatch('Friends');
-        expect(helper.debugElement.query('li.active .submenu li a').text()).toMatch('Example');
     });
 
 });
diff --git a/src/app/layout/sidebar/sidebar.component.ts b/src/app/layout/sidebar/sidebar.component.ts
index a41e57a..5434b6f 100644
--- a/src/app/layout/sidebar/sidebar.component.ts
+++ b/src/app/layout/sidebar/sidebar.component.ts
@@ -1,30 +1,82 @@
 import {Component, Inject, Input} from "ng-forward";
 import {SidebarNotificationService} from "./sidebar.notification.service";
 import {SessionService} from '../../login/session.service';
-import {SidebarSectionsComponent} from './sidebar-sections.component';
+import {SidebarSectionComponent} from './sidebar-section.component';
 
 @Component({
     selector: 'sidebar',
     templateUrl: 'app/layout/sidebar/sidebar.html',
-    directives: [SidebarSectionsComponent]
+    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();
@@ -38,6 +90,14 @@ export class SidebarComponent {
         });
     }
 
+    /**
+     * @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;
     }
diff --git a/src/app/layout/sidebar/sidebar.html b/src/app/layout/sidebar/sidebar.html
index a6ba6a1..5e0c800 100644
--- a/src/app/layout/sidebar/sidebar.html
+++ b/src/app/layout/sidebar/sidebar.html
@@ -7,14 +7,7 @@
             <span class="name">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 {{ctrl.user.name}}
-                <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" ng-show="ctrl.showStatus">
               <i class="fa fa-circle"></i> {{ctrl.user.status}}
@@ -23,7 +16,7 @@
         </div>
 
         <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
-            <sidebar-sections></sidebar-sections>
+            <sidebar-section [name]='Navigation'></sidebar-section>
         </div>
       </div>
     </section>
--
libgit2 0.21.2