baSlimScroll

package.json

@@ -27,6 +27,7 @@
     "font-awesome-sass-loader": "^1.0.1",
     "google-maps": "^3.2.1",
     "jquery": "^2.2.3",
+    "jquery-slimscroll": "^1.3.6",
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
     "ng2-bootstrap": "^1.0.16",

src/app/theme/components/baSidebar/baSidebar.component.ts

@@ -3,6 +3,7 @@ import {Router} from '@angular/router-deprecated';
 
 import {AppState} from '../../../app.state';
 import {layoutSizes} from '../../../theme';
+import {BaSlimScroll} from '../../../theme/directives';
 import {BaSidebarService} from './baSidebar.service';
 
 @Component({
@@ -10,7 +11,8 @@ import {BaSidebarService} from './baSidebar.service';
   encapsulation: ViewEncapsulation.None,
   styles: [require('./baSidebar.scss')],
   template: require('./baSidebar.html'),
-  providers: [BaSidebarService]
+  providers: [BaSidebarService],
+  directives: [BaSlimScroll]
 })
 export class BaSidebar {
 

src/app/theme/components/baSidebar/baSidebar.html

@@ -1,5 +1,5 @@
 <aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
-  <ul class="al-sidebar-list">
+  <ul id="al-sidebar-list" class="al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
     <li *ngFor="let item of menuItems" class="al-sidebar-list-item"
         [ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
 

src/app/theme/directives/baSlimScroll/baSlimScroll.directive.ts

@@ -0,0 +1,31 @@
+import {Directive, Input, Output, ElementRef, EventEmitter} from '@angular/core';
+
+import './baSlimScroll.loader.ts';
+
+@Directive({
+  selector: '[baSlimScroll]'
+})
+export class BaSlimScroll {
+
+  @Input() public baSlimScrollOptions:Object;
+
+  constructor(private _elementRef:ElementRef) {
+  }
+
+  ngOnChanges(changes) {
+    this._scroll();
+  }
+
+  private _scroll() {
+    this._destroy();
+    this._init();
+  }
+
+  private _init() {
+    $(this._elementRef.nativeElement).slimScroll(this.baSlimScrollOptions);
+  }
+
+  private _destroy() {
+    $(this._elementRef.nativeElement).slimScroll({ destroy: true });
+  }
+}

src/app/theme/directives/baSlimScroll/baSlimScroll.loader.ts

@@ -0,0 +1 @@
+require('jquery-slimscroll');

src/app/theme/directives/baSlimScroll/index.ts

@@ -0,0 +1 @@
+export * from './baSlimScroll.directive.ts';

src/app/theme/directives/index.ts

@@ -1,2 +1,3 @@
 export * from './baScrollPosition';
 export * from './baThemeRun';
+export * from './baSlimScroll';