From c9168717a428087328fae1c6fc88299f7148d3d3 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 6 Mar 2018 11:57:01 +0300
Subject: [PATCH] Added component doc for the FuseSidebar

---
 .../content/components/components.module.ts   |  8 ++-
 .../components/sidebar/sidebar.component.html | 61 +++++++++++++++++++
 .../components/sidebar/sidebar.component.scss |  7 +++
 .../components/sidebar/sidebar.component.ts   | 13 ++++
 src/app/navigation/navigation.ts              |  7 +++
 5 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 src/app/main/content/components/sidebar/sidebar.component.html
 create mode 100644 src/app/main/content/components/sidebar/sidebar.component.scss
 create mode 100644 src/app/main/content/components/sidebar/sidebar.component.ts

diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts
index d2fd419f..cbd8af11 100644
--- a/src/app/main/content/components/components.module.ts
+++ b/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
     ],
diff --git a/src/app/main/content/components/sidebar/sidebar.component.html b/src/app/main/content/components/sidebar/sidebar.component.html
new file mode 100644
index 00000000..5091261a
--- /dev/null
+++ b/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>
+
diff --git a/src/app/main/content/components/sidebar/sidebar.component.scss b/src/app/main/content/components/sidebar/sidebar.component.scss
new file mode 100644
index 00000000..38d84b8f
--- /dev/null
+++ b/src/app/main/content/components/sidebar/sidebar.component.scss
@@ -0,0 +1,7 @@
+:host {
+
+    .content{
+        max-width: 1100px;
+    }
+
+}
diff --git a/src/app/main/content/components/sidebar/sidebar.component.ts b/src/app/main/content/components/sidebar/sidebar.component.ts
new file mode 100644
index 00000000..ed91b597
--- /dev/null
+++ b/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()
+    {
+    }
+}
diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts
index d89c49db..44cb879c 100644
--- a/src/app/navigation/navigation.ts
+++ b/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',