feat: add perfect-scrollbar for side menu

Author: RomanHotsiy

lib/components/Redoc/redoc.scss

@@ -45,7 +45,7 @@
 }
 
 side-menu {
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 [sticky-sidebar] {

lib/components/SideMenu/side-menu.html

@@ -8,7 +8,7 @@
   <side-menu-items [items]="menuItems" (activate)="activateAndScroll($event)"></side-menu-items>
 </ng-template>
 
-<div #desktop id="resources-nav">
+<div #desktop id="resources-nav" perfect-scrollbar>
   <ul class="menu-root">
     <div *ngIf="itemsTemplate; else default">
       <ng-container *ngTemplateOutlet="itemsTemplate; context: this"></ng-container>

lib/components/SideMenu/side-menu.scss

@@ -2,10 +2,14 @@
 $mobile-menu-compact-breakpoint: 550px;
 
 :host {
-  display: block;
+  display: flex;
   box-sizing: border-box;
 }
 
+#resources-nav {
+  position: relative;
+}
+
 ul.menu-root {
   margin: 0;
   padding: 0;
@@ -35,6 +39,10 @@ ul.menu-root {
 }
 
 @media (max-width: $side-menu-mobile-breakpoint) {
+  :host {
+    display: block;
+  }
+
   .mobile-nav {
     display: block;
   }

lib/components/SideMenu/side-menu.ts

@@ -6,12 +6,14 @@ import { Component,
   Output,
   ElementRef,
   ChangeDetectorRef,
+  ViewChild,
   OnInit,
   OnDestroy
 } from '@angular/core';
 
 import { trigger, state, animate, transition, style } from '@angular/core';
 import { ScrollService, MenuService, OptionsService, MenuItem } from '../../services/';
+import { PerfectScrollbar } from '../../shared/components';
 import { BrowserDomAdapter as DOM } from '../../utils/browser-adapter';
 
 const global = window;
@@ -51,6 +53,7 @@ export class SideMenu implements OnInit, OnDestroy {
   activeItemCaption: string;
   menuItems: Array<MenuItem>;
   @Input() itemsTemplate;
+  @ViewChild(PerfectScrollbar) PS:PerfectScrollbar;
 
   private options: any;
   private $element: any;
@@ -77,7 +80,7 @@ export class SideMenu implements OnInit, OnDestroy {
 
     this.changedActiveSubscription = this.menuService.changedActiveItem.subscribe((evt) => this.changed(evt));
     this.changedSubscription = this.menuService.changed.subscribe((evt) => {
-      this.detectorRef.detectChanges()
+      this.update();
     });
   }
 
@@ -95,11 +98,16 @@ export class SideMenu implements OnInit, OnDestroy {
       this.activeItemCaption = '';
     }
 
-    //safari doesn't update bindings if not run changeDetector manually :(
-    this.detectorRef.detectChanges();
+    // safari doesn't update bindings if not run changeDetector manually :(
+    this.update();
     this.scrollActiveIntoView();
   }
 
+  update() {
+    this.detectorRef.detectChanges();
+    this.PS && this.PS.update();
+  }
+
   scrollActiveIntoView() {
     let $item = this.$element.querySelector('li.active, label.active');
     if ($item) $item.scrollIntoViewIfNeeded();

lib/shared/components/PerfectScrollbar/perfect-scrollbar.ts

@@ -0,0 +1,37 @@
+'use strict';
+
+import 'perfect-scrollbar/dist/css/perfect-scrollbar.css';
+
+import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+import { BrowserDomAdapter as DOM } from '../../../utils/browser-adapter';
+
+import * as PS from 'perfect-scrollbar';
+
+@Directive({
+  selector: '[perfect-scrollbar]'
+})
+export class PerfectScrollbar implements OnInit, OnDestroy {
+  $element: any;
+  subscription: any;
+
+  constructor(elementRef:ElementRef) {
+    this.$element = elementRef.nativeElement;
+  }
+
+  update() {
+    PS.update(this.$element);
+  }
+
+  ngOnInit() {
+    requestAnimationFrame(() => PS.initialize(this.$element, {
+      wheelSpeed: 2,
+      wheelPropagation: false,
+      minScrollbarLength: 20,
+      suppressScrollX: true
+    }));
+  }
+
+  ngOnDestroy() {
+    PS.destroy(this.$element);
+  }
+}

lib/shared/components/index.ts

@@ -7,10 +7,11 @@ import { CopyButton } from './CopyButton/copy-button.directive';
 import { SelectOnClick } from './SelectOnClick/select-on-click.directive';
 import { DynamicNg2Viewer, DynamicNg2Wrapper } from './DynamicNg2Viewer/dynamic-ng2-viewer.component';
 import { LazyFor, LazyTasksService, LazyTasksServiceSync } from './LazyFor/lazy-for';
+import { PerfectScrollbar } from './PerfectScrollbar/perfect-scrollbar';
 
 export const REDOC_COMMON_DIRECTIVES = [
-  DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper, LazyFor
+  PerfectScrollbar, DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper, LazyFor
 ];
 
 export { DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper, LazyFor }
-export { LazyTasksService, LazyTasksServiceSync }
+export { LazyTasksService, LazyTasksServiceSync, PerfectScrollbar }