From d781e5992815573ecb8469e609aaf017bf1fbc57 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 3 Jul 2018 13:54:19 +0300
Subject: [PATCH] (Sidebar) Added "foldedWidth" input for controlling the width
 of the folded sidebar (Sidebar) Replaced the margin with padding on the
 folded sidebar's sibling (Docs) Updated Sidebar docs

---
 .../components/sidebar/sidebar.component.scss |  6 ---
 .../components/sidebar/sidebar.component.ts   | 54 +++++++++++++++----
 .../components/sidebar/sidebar.component.html |  7 +++
 3 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss
index 0005a506..63a7775a 100644
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -37,12 +37,6 @@ fuse-sidebar {
         position: absolute !important;
         top: 0;
         bottom: 0;
-
-        &:not(.unfolded) {
-            width: 64px;
-            min-width: 64px;
-            max-width: 64px;
-        }
     }
 
     &.animations-enabled {
diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts
index a4695d4c..4f80c255 100644
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -40,6 +40,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostBinding('class.locked-open')
     isLockedOpen: boolean;
 
+    // Folded width
+    @Input()
+    foldedWidth: number;
+
     // Folded unfolded
     @HostBinding('class.unfolded')
     unfolded: boolean;
@@ -92,6 +96,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     )
     {
         // Set the defaults
+        this.foldedWidth = 64;
         this.foldedChanged = new EventEmitter();
         this.openedChanged = new EventEmitter();
         this.opened = false;
@@ -108,7 +113,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
-    // Folded
+    /**
+     * Folded
+     *
+     * @param {boolean} value
+     */
     @Input()
     set folded(value: boolean)
     {
@@ -121,23 +130,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Programmatically add/remove margin to the element
+        // Programmatically add/remove padding to the element
         // that comes after or before based on the position
         let sibling,
             styleRule;
 
-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';
 
         // Get the sibling and set the style rule
         if ( this.position === 'left' )
         {
             sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'margin-left';
+            styleRule = 'padding-left';
         }
         else
         {
             sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'margin-right';
+            styleRule = 'padding-right';
         }
 
         // If there is no sibling, return...
@@ -152,6 +161,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             // Fold the sidebar
             this.fold();
 
+            // Set the folded width
+            this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
             // Set the style and class
             this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
             this._renderer.addClass(this._elementRef.nativeElement, 'folded');
@@ -162,6 +176,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             // Unfold the sidebar
             this.unfold();
 
+            // Remove the folded width
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
             // Remove the style and class
             this._renderer.removeStyle(sibling, styleRule);
             this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
@@ -375,23 +394,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Programmatically add/remove margin to the element
+        // Programmatically add/remove padding to the element
         // that comes after or before based on the position
         let sibling,
             styleRule;
 
-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';
 
         // Get the sibling and set the style rule
         if ( this.position === 'left' )
         {
             sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'margin-left';
+            styleRule = 'padding-left';
         }
         else
         {
             sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'margin-right';
+            styleRule = 'padding-right';
         }
 
         // If there is no sibling, return...
@@ -403,6 +422,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Fold the sidebar
         this.fold();
 
+        // Set the folded width
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
         // Set the style and class
         this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
         this._renderer.addClass(this._elementRef.nativeElement, 'folded');
@@ -645,6 +669,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Unfold the sidebar temporarily
         this.unfolded = true;
 
+        // Remove the folded width
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
@@ -667,6 +696,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Fold the sidebar back
         this.unfolded = false;
 
+        // Set the folded width
+        const styleValue = this.foldedWidth + 'px';
+
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
diff --git a/src/app/main/documentation/components/sidebar/sidebar.component.html b/src/app/main/documentation/components/sidebar/sidebar.component.html
index 57e15554..2e1a5ef9 100644
--- a/src/app/main/documentation/components/sidebar/sidebar.component.html
+++ b/src/app/main/documentation/components/sidebar/sidebar.component.html
@@ -47,6 +47,13 @@
             </p>
         </div>
 
+        <div class="my-48">
+            <h3><code>[foldedWidth]</code></h3>
+            <p class="py-8">
+                Controls the width of the sidebar when it's folded.
+            </p>
+        </div>
+
         <div class="my-48">
             <h3><code>[position]</code></h3>
             <p class="py-8">