From b918fa4122bd76158d7822c29183d195cd1d70fc Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 30 May 2018 12:22:19 +0300
Subject: [PATCH] (Sidebar) Changed align to position since align is a native
 HTML attribute Added invisibleOverlay option

---
 .../components/sidebar/sidebar.component.scss |  8 +++-
 .../components/sidebar/sidebar.component.ts   | 39 ++++++++++++-------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss
index 25b9b5ef..66a6b2cc 100644
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -17,12 +17,12 @@ fuse-sidebar {
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
     background: white;
 
-    &.left-aligned {
+    &.left-positioned {
         left: 0;
         transform: translateX(-100%);
     }
 
-    &.right-aligned {
+    &.right-positioned {
         right: 0;
         transform: translateX(100%);
     }
@@ -58,4 +58,8 @@ fuse-sidebar {
     z-index: 3;
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0;
+
+    &.fuse-sidebar-overlay-invisible {
+        background-color: transparent;
+    }
 }
\ No newline at end of file
diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts
index d44d1c77..bf398ac5 100644
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -20,9 +20,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @Input()
     name: string;
 
-    // Align
+    // Position
     @Input()
-    align: 'left' | 'right';
+    position: 'left' | 'right';
 
     // Open
     @HostBinding('class.open')
@@ -40,6 +40,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostBinding('class.unfolded')
     unfolded: boolean;
 
+    // Invisible overlay
+    @Input()
+    invisibleOverlay: boolean;
+
     // Private
     private _folded: boolean;
     private _fuseConfig: any;
@@ -70,9 +74,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     )
     {
         // Set the defaults
-        this.opened = false;
         this.folded = false;
-        this.align = 'left';
+        this.opened = false;
+        this.position = 'left';
+        this.invisibleOverlay = false;
 
         // Set the private defaults
         this._unsubscribeAll = new Subject();
@@ -97,14 +102,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         this._folded = value;
 
         // Programmatically add/remove margin to the element
-        // that comes after or before based on the alignment
+        // that comes after or before based on the position
         let sibling,
             styleRule;
 
         const styleValue = '64px';
 
         // Get the sibling and set the style rule
-        if ( this.align === 'left' )
+        if ( this.position === 'left' )
         {
             sibling = this._elementRef.nativeElement.nextElementSibling;
             styleRule = 'marginLeft';
@@ -162,8 +167,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Setup visibility
         this._setupVisibility();
 
-        // Setup alignment
-        this._setupAlignment();
+        // Setup position
+        this._setupPosition();
 
         // Setup lockedOpen
         this._setupLockedOpen();
@@ -193,21 +198,21 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Set the sidebar alignment
+     * Setup the sidebar position
      *
      * @private
      */
-    private _setupAlignment(): void
+    private _setupPosition(): void
     {
         // Add the correct class name to the sidebar
-        // element depending on the align attribute
-        if ( this.align === 'right' )
+        // element depending on the position attribute
+        if ( this.position === 'right' )
         {
-            this._renderer.addClass(this._elementRef.nativeElement, 'right-aligned');
+            this._renderer.addClass(this._elementRef.nativeElement, 'right-positioned');
         }
         else
         {
-            this._renderer.addClass(this._elementRef.nativeElement, 'left-aligned');
+            this._renderer.addClass(this._elementRef.nativeElement, 'left-positioned');
         }
     }
 
@@ -314,6 +319,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Add a class to the backdrop element
         this._backdrop.classList.add('fuse-sidebar-overlay');
 
+        // Add a class depending on the invisibleOverlay option
+        if ( this.invisibleOverlay )
+        {
+            this._backdrop.classList.add('fuse-sidebar-overlay-invisible');
+        }
+
         // Append the backdrop to the parent of the sidebar
         this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop);