Automatically expand/collapse sidebar on mouse over/leave.

2 files changed, 35 insertions, 2 deletions

diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.html b/webapp/src/app/@theme/layouts/xds/xds.layout.html
index bf2b4e6..74d0f97 100644
--- a/webapp/src/app/@theme/layouts/xds/xds.layout.html
+++ b/webapp/src/app/@theme/layouts/xds/xds.layout.html
@@ -4,7 +4,8 @@
     <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
   </nb-layout-header>
 
-  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive [right]="sidebar.id === 'right'">
+  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive [right]="sidebar.id === 'right'"
+    (mouseenter)="onMouseEnter($event)" (mouseleave)="onMouseLeave($event)">
 
     <nb-sidebar-header (click)="toogleSidebar()">
       <!-- XXX - ugly rework -->
diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.ts b/webapp/src/app/@theme/layouts/xds/xds.layout.ts
index 8987584..7e7f0fd 100644
--- a/webapp/src/app/@theme/layouts/xds/xds.layout.ts
+++ b/webapp/src/app/@theme/layouts/xds/xds.layout.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, EventEmitter } from '@angular/core';
 import {
   NbMediaBreakpoint,
   NbMediaBreakpointsService,
@@ -11,8 +11,11 @@ import {
 import { StateService } from '../../../@core/data/state.service';
 
 import { Subscription } from 'rxjs/Subscription';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/withLatestFrom';
 import 'rxjs/add/operator/delay';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/takeUntil';
 
 // TODO: move layouts into the framework
 @Component({
@@ -32,6 +35,9 @@ export class XdsLayoutComponent implements OnDestroy {
   protected sidebarState$: Subscription;
   protected menuClick$: Subscription;
 
+  private _mouseEnterStream: EventEmitter<any> = new EventEmitter();
+  private _mouseLeaveStream: EventEmitter<any> = new EventEmitter();
+
   constructor(protected stateService: StateService,
     protected menuService: NbMenuService,
     protected themeService: NbThemeService,
@@ -62,6 +68,32 @@ export class XdsLayoutComponent implements OnDestroy {
     this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
     this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false);
     this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));
+
+    // Automatically expand sidebar on mouse over
+    this._mouseEnterStream.flatMap(e => {
+      return Observable
+        .of(e)
+        .delay(200)
+        .takeUntil(this._mouseLeaveStream);
+    })
+      .subscribe(e => (this.sidebarCompact) && this.sidebarService.toggle(true, 'menu-sidebar'));
+
+    // Automatically collapse sidebar on mouse leave
+    this._mouseLeaveStream.flatMap(e => {
+      return Observable
+        .of(e)
+        .delay(500)
+        .takeUntil(this._mouseEnterStream);
+    })
+      .subscribe(e => this.sidebarService.toggle(true, 'menu-sidebar'));
+  }
+
+  onMouseEnter($event) {
+    this._mouseEnterStream.emit($event);
+  }
+
+  onMouseLeave($event) {
+    this._mouseLeaveStream.emit($event);
   }
 
   toogleSidebar() {