Added component doc for the FuseSidebar

src/app/main/content/components/components.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatListModule, MatMenuModule, MatSelectModule, MatSliderModule, MatSlideToggleModule, MatTabsModule } from '@angular/material';
+import { MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatListModule, MatMenuModule, MatSelectModule, MatSlideToggleModule, MatTabsModule } from '@angular/material';
 
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
@@ -16,6 +16,7 @@ import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/ma
 import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
 import { FuseNavigationDocsComponent } from './navigation/navigation.component';
 import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component';
+import { FuseSidebarDocsComponent } from './sidebar/sidebar.component';
 import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
 import { FuseWidgetDocsComponent } from './widget/widget.component';
 
@@ -48,6 +49,10 @@ const routes = [
         path     : 'search-bar',
         component: FuseSearchBarDocsComponent
     },
+    {
+        path     : 'sidebar',
+        component: FuseSidebarDocsComponent
+    },
     {
         path     : 'shortcuts',
         component: FuseShortcutsDocsComponent
@@ -67,6 +72,7 @@ const routes = [
         FuseMultiLanguageDocsComponent,
         FuseNavigationDocsComponent,
         FuseSearchBarDocsComponent,
+        FuseSidebarDocsComponent,
         FuseShortcutsDocsComponent,
         FuseWidgetDocsComponent
     ],

src/app/main/content/components/sidebar/sidebar.component.html

@@ -0,0 +1,61 @@
+<div id="sidebar" class="page-layout simple fullwidth" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Sidebar</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-sidebar</code> is a custom built Fuse component allows you to create a sidebar. Currently it's
+            only used as the main navigation sidebar but in the future it will allow multiple usages.
+        </p>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
+                        <fuse-sidebar [name]="'navbar'" [folded]="someSettings.isFolded" [lockedOpen]="'gt-md'"></fuse-sidebar>
+                    </textarea>
+                </fuse-highlight>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>[name]</h2>
+            <p class="py-8">
+                <b>name</b> attribute allows you to set a unique name to the sidebar. It's required for sidebar to
+                work correctly, as every sidebar being registered to the sidebar service.
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>[folded]</h2>
+            <p class="py-8">
+                Controls the folded status of the sidebar.
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>[lockedOpen]</h2>
+            <p class="py-8">
+                Accepts Angular Material breakpoint aliases ('gt-md', 'lg' etc.) and locks open the sidebar if the
+                alias matches the current breakpoint, similar to how Angular Material 1.x sidenav works.
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

src/app/main/content/components/sidebar/sidebar.component.scss

@@ -0,0 +1,7 @@
+:host {
+
+    .content{
+        max-width: 1100px;
+    }
+
+}

src/app/main/content/components/sidebar/sidebar.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-sidebar-docs',
+    templateUrl: './sidebar.component.html',
+    styleUrls  : ['./sidebar.component.scss']
+})
+export class FuseSidebarDocsComponent
+{
+    constructor()
+    {
+    }
+}

src/app/navigation/navigation.ts

@@ -855,6 +855,13 @@ export const navigation = [
                 'icon' : 'settings_input_component',
                 'url'  : '/components/search-bar'
             },
+            {
+                'id'   : 'sidebar',
+                'title': 'Sidebar',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/sidebar'
+            },
             {
                 'id'   : 'shortcuts',
                 'title': 'Shortcuts',