feat(sidebar): breakpoints configuration for compacted states (#457)

src/framework/theme/components/sidebar/sidebar.component.ts

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, HostBinding, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
+import { Component, HostBinding, Input, OnInit, OnDestroy, ElementRef, OnChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 
@@ -106,7 +106,7 @@ export class NbSidebarFooterComponent {
  </div>
  `,
 })
-export class NbSidebarComponent implements OnInit, OnDestroy {
+export class NbSidebarComponent implements OnChanges, OnInit, OnDestroy {
 
  static readonly STATE_EXPANDED: string = 'expanded';
  static readonly STATE_COLLAPSED: string = 'collapsed';
@@ -214,7 +214,6 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
  @Input()
  set responsive(val: boolean) {
  this.responsiveValue = convertToBoolProperty(val);
- this.toggleResponsive(this.responsiveValue);
  }
 
  /**
@@ -225,12 +224,31 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
  */
  @Input() tag: string;
 
+ // TODO: get width by the key and define only max width for the tablets and mobiles
+ /**
+ * Controls on which screen sizes sidebar should be switched to compacted state.
+ * Works only when responsive mode is on.
+ * Default values are `['xs', 'is', 'sm', 'md', 'lg']`.
+ *
+ * @type string[]
+ */
+ @Input() compactedBreakpoints: string[] = ['xs', 'is', 'sm', 'md', 'lg'];
+
+ /**
+ * Controls on which screen sizes sidebar should be switched to collapsed state.
+ * Works only when responsive mode is on.
+ * Default values are `['xs', 'is']`.
+ *
+ * @type string[]
+ */
+ @Input() collapsedBreakpoints: string[] = ['xs', 'is'];
+
  private mediaQuerySubscription: Subscription;
  private responsiveState = NbSidebarComponent.RESPONSIVE_STATE_PC;
 
  constructor(private sidebarService: NbSidebarService,
-  private themeService: NbThemeService,
-  private element: ElementRef) {
+ private themeService: NbThemeService,
+ private element: ElementRef) {
  }
 
  toggleResponsive(enabled: boolean) {
@@ -241,6 +259,12 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
  }
  }
 
+ ngOnChanges(changes) {
+ if (changes.responsive) {
+ this.toggleResponsive(this.responsiveValue);
+ }
+ }
+
  ngOnInit() {
  this.sidebarService.onToggle()
  .pipe(takeWhile(() => this.alive))
@@ -283,7 +307,7 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
  const linkChildren = ['span', 'i'];
 
  // if we clicked on span - get the link
- if (linkChildren.indexOf(link.tagName.toLowerCase()) !== -1 && link.parentNode) {
+ if (linkChildren.includes(link.tagName.toLowerCase()) && link.parentNode) {
  link = event.target.parentNode;
  }
 
@@ -335,10 +359,10 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
 
  const closedStates = [NbSidebarComponent.STATE_COMPACTED, NbSidebarComponent.STATE_COLLAPSED];
  if (compact) {
- this.state = closedStates.indexOf(this.stateValue) >= 0 ?
+ this.state = closedStates.includes(this.stateValue) ?
  NbSidebarComponent.STATE_EXPANDED : NbSidebarComponent.STATE_COMPACTED;
  } else {
- this.state = closedStates.indexOf(this.stateValue) >= 0 ?
+ this.state = closedStates.includes(this.stateValue) ?
  NbSidebarComponent.STATE_EXPANDED : NbSidebarComponent.STATE_COLLAPSED;
  }
  }
@@ -347,20 +371,20 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
  return this.themeService.onMediaQueryChange()
  .subscribe(([prev, current]: [NbMediaBreakpoint, NbMediaBreakpoint]) => {
 
- // TODO: get width by the key and define only max width for the tablets and mobiles
- const tablet = ['xs', 'is', 'sm', 'md', 'lg'];
- const mobile = ['xs', 'is'];
+ const isCollapsed = this.collapsedBreakpoints.includes(current.name);
+ const isCompacted = this.compactedBreakpoints.includes(current.name);
 
- if (tablet.indexOf(current.name) !== -1) {
+ if (isCompacted) {
  this.fixed = true;
  this.compact();
  this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_TABLET;
  }
- if (mobile.indexOf(current.name) !== -1) {
+ if (isCollapsed) {
+ this.fixed = true;
  this.collapse();
  this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_MOBILE;
  }
- if (tablet.indexOf(current.name) === -1  && prev.width < current.width) {
+ if (!isCollapsed && !isCollapsed && prev.width < current.width) {
  this.expand();
  this.fixed = false;
  this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_PC;