(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

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 {

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();
     }

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">