feat(sidebar): add ability fix sidebar container (#642)

akveo · Aug 16, 2018 · 7939344 · 7939344
1 parent 6fb522d
commit 7939344
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/framework/theme/components/sidebar/sidebar.component.scss b/src/framework/theme/components/sidebar/sidebar.component.scss
@@ -20,13 +20,16 @@
   }
 
   .main-container {
-    position: fixed;
     // TODO: this looks like a dirty fix to stop sidebar jumping while page is scrolled
     transform: translate3d(0, 0, 0);
     display: flex;
     flex-direction: column;
   }
 
+  .main-container-fixed {
+    position: fixed;
+  }
+
   &.right {
     @include nb-ltr(order, 4);
     @include nb-rtl(order, 0);

diff --git a/src/framework/theme/components/sidebar/sidebar.component.ts b/src/framework/theme/components/sidebar/sidebar.component.ts
@@ -91,7 +91,8 @@ export class NbSidebarFooterComponent {
   selector: 'nb-sidebar',
   styleUrls: ['./sidebar.component.scss'],
   template: `
-    <div class="main-container">
+    <div class="main-container"
+         [class.main-container-fixed]="containerFixedValue">
       <ng-content select="nb-sidebar-header"></ng-content>
       <div class="scrollable" (click)="onClick($event)">
         <ng-content></ng-content>
@@ -115,6 +116,8 @@ export class NbSidebarComponent implements OnChanges, OnInit, OnDestroy {
 
   private alive = true;
 
+  containerFixedValue: boolean = true;
+
   @HostBinding('class.fixed') fixedValue: boolean = false;
   @HostBinding('class.right') rightValue: boolean = false;
   @HostBinding('class.left') leftValue: boolean = true;
@@ -192,6 +195,15 @@ export class NbSidebarComponent implements OnChanges, OnInit, OnDestroy {
     this.fixedValue = convertToBoolProperty(val);
   }
 
+  /**
+   * Makes sidebar container fixed
+   * @type {boolean}
+   */
+  @Input()
+  set containerFixed(val: boolean) {
+    this.containerFixedValue = convertToBoolProperty(val);
+  }
+
   /**
    * Initial sidebar state, `expanded`|`collapsed`|`compacted`
    * @type {string}