feat(sidebar): menu separated from sidebar, menu merged with routes

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

@@ -0,0 +1,70 @@
+import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
+import {Router, RouterConfig, NavigationEnd} from '@angular/router';
+import {Subscription} from 'rxjs/Rx';
+
+import {BaSlimScroll} from '../../../theme/directives';
+import {BaMenuService} from './baMenu.service';
+import {BaMenuItem} from './components/baMenuItem';
+
+@Component({
+  selector: 'ba-menu',
+  encapsulation: ViewEncapsulation.None,
+  styles: [require('./baMenu.scss')],
+  template: require('./baMenu.html'),
+  providers: [BaMenuService],
+  directives: [BaMenuItem, BaSlimScroll]
+})
+export class BaMenu {
+
+  @Input() menuRoutes:RouterConfig = [];
+  @Input() sidebarCollapsed:boolean = false;
+  @Input() menuHeight:number;
+
+  @Output() expandMenu = new EventEmitter<any>();
+
+  public menuItems:any[];
+  public showHoverElem:boolean;
+  public hoverElemHeight:number;
+  public hoverElemTop:number;
+  protected _onRouteChange:Subscription;
+
+  constructor(private _router:Router, private _service:BaMenuService) {
+
+    this._onRouteChange = this._router.events.subscribe((event) => {
+      if (this.menuItems && event instanceof NavigationEnd) {
+        this.menuItems = this._service.selectMenuItem(this.menuItems);
+      }
+    });
+  }
+
+  public ngOnInit():void {
+    this.menuItems = this._service.convertRoutesToMenus(this.menuRoutes);
+  }
+
+  public ngOnDestroy():void {
+    this._onRouteChange.unsubscribe();
+  }
+
+  public hoverItem($event):void {
+    this.showHoverElem = true;
+    this.hoverElemHeight = $event.currentTarget.clientHeight;
+    // TODO: get rid of magic 66 constant
+    this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
+  }
+
+  public toggleSubMenu($event):boolean {
+    var submenu = jQuery($event.currentTarget).next();
+
+    if (this.sidebarCollapsed) {
+      this.expandMenu.emit(null);
+      if (!$event.item.expanded) {
+        $event.item.expanded = true;
+      }
+    } else {
+      $event.item.expanded = !$event.item.expanded;
+      submenu.slideToggle();
+    }
+
+    return false;
+  }
+}

src/app/theme/components/baMenu/baMenu.html

@@ -0,0 +1,11 @@
+<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
+  <ul id="al-sidebar-list" class="al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
+    <ba-menu-item
+      [menuItem]="item"
+      (itemHover)="hoverItem($event)"
+      (toggleSubMenu)="toggleSubMenu($event)"
+      *ngFor="let item of menuItems"></ba-menu-item>
+  </ul>
+  <div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
+       [ngClass]="{'show-hover-elem': showHoverElem }"></div>
+</aside>

src/app/theme/components/baMenu/baMenu.scss

@@ -0,0 +1 @@
+@import '../../sass/conf/conf';

src/app/theme/components/baMenu/baMenu.service.ts

@@ -0,0 +1,101 @@
+import {Injectable} from '@angular/core';
+import {Router, UrlTree, RouterConfig} from '@angular/router';
+
+@Injectable()
+export class BaMenuService {
+
+  constructor(private _router:Router) {
+  }
+
+  public convertRoutesToMenus(routes:RouterConfig):any[] {
+    let items = this._convertArrayToItems(routes);
+    return this._skipEmpty(items);
+  }
+
+  public selectMenuItem(menuItems:any[]):any[] {
+    let items = [];
+    menuItems.forEach((item) => {
+      this._selectItem(item);
+
+      if (item.children && item.children.length > 0) {
+        item.children = this.selectMenuItem(item.children);
+      }
+      items.push(item);
+    });
+    return items;
+  }
+
+  protected _skipEmpty(items:any[]):any[] {
+    let menu = [];
+    items.forEach((item) => {
+      let menuItem;
+      if (item.skip) {
+        if (item.children && item.children.length > 0) {
+          menuItem = item.children;
+        }
+      } else {
+        menuItem = item;
+      }
+
+      if (menuItem) {
+        menu.push(menuItem);
+      }
+    });
+
+    return [].concat.apply([], menu);
+  }
+
+  protected _convertArrayToItems(routes:any[], parent?:any):any[] {
+    let items = [];
+    routes.forEach((route) => {
+      items.push(this._convertObjectToItem(route, parent));
+    });
+    return items;
+  }
+
+  protected _convertObjectToItem(object, parent?:any):any {
+    let item:any = {};
+    if (object.data && object.data.menu) {
+      // this is a menu object
+      item = object.data.menu;
+      item.route = object;
+      delete item.route.data.menu;
+    } else {
+      item.route = object;
+      item.skip = true;
+    }
+
+    // we have to collect all pathes to correctly build the url then
+    item.route.paths = parent && parent.route && parent.route.paths ? parent.route.paths.slice(0) : [];
+    item.route.paths.push(item.route.path);
+
+    if (object.children && object.children.length > 0) {
+      item.children = this._convertArrayToItems(object.children, item);
+    }
+
+    let prepared = this._prepareItem(item);
+
+    // if current item is selected or expanded - then parent is expanded too
+    if ((prepared.selected || prepared.expanded) && parent) {
+      parent.expanded = true;
+    }
+
+    return prepared;
+  }
+
+  protected _prepareItem(object:any):any {
+    if (!object.disabled && !object.skip) {
+
+      let itemUrl = this._router.serializeUrl(this._router.createUrlTree(object.route.paths));
+      object.url = object.url ? object.url : '/#' + itemUrl;
+      return this._selectItem(object);
+    }
+
+    return object;
+  }
+
+  protected _selectItem(object:any):any {
+    object.selected = object.url == ('/#' + this._router.url);
+    return object;
+  }
+}

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts

@@ -0,0 +1,33 @@
+import {Component, ElementRef, HostListener, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
+
+@Component({
+  selector: 'ba-menu-item',
+  encapsulation: ViewEncapsulation.None,
+  styles: [require('./baMenuItem.scss')],
+  template: require('./baMenuItem.html'),
+  providers: [],
+  directives: [BaMenuItem]
+})
+export class BaMenuItem {
+
+  @Input() menuItem:any;
+  @Input() child:boolean = false;
+
+  @Output() itemHover = new EventEmitter<any>();
+  @Output() toggleSubMenu = new EventEmitter<any>();
+
+  public outOfArea:number = -200;
+
+  public ngOnInit():void {
+  }
+
+  public onHoverItem($event):void {
+    this.itemHover.emit($event);
+  }
+
+  public onToggleSubMenu($event, item):boolean {
+    $event.item = item;
+    this.toggleSubMenu.emit($event);
+    return false;
+  }
+}

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html

@@ -0,0 +1,17 @@
+<li [ngClass]="{'al-sidebar-list-item': !child, 'ba-sidebar-sublist-item': child, 'selected': menuItem.selected && !menuItem.expanded, 'with-sub-menu': menuItem.children, 'ba-sidebar-item-expanded': menuItem.expanded}">
+
+
+  <a *ngIf="!menuItem.children" [routerLink]="menuItem.url" [target]="menuItem.target || ''" class="al-sidebar-list-link">
+    <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
+  </a>
+
+  <a *ngIf="menuItem.children" (mouseenter)="onHoverItem($event, item)" (click)="onToggleSubMenu($event, menuItem)" class="al-sidebar-list-link">
+    <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
+    <b class="fa" [ngClass]="{'fa-angle-up': menuItem.expanded, 'fa-angle-down': !menuItem.expanded}"></b>
+  </a>
+
+  <ul *ngIf="menuItem.children" class="al-sidebar-sublist" [ngClass]="{'slide-right': menuItem.slideRight}">
+    <ba-menu-item [menuItem]="subItem" [child]="true" *ngFor="let subItem of menuItem.children"></ba-menu-item>
+  </ul>
+
+</li>

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.scss

@@ -0,0 +1 @@
+@import '../../../../sass/conf/conf';

src/app/theme/components/baMenu/components/baMenuItem/index.ts

@@ -0,0 +1 @@
+export * from './baMenuItem.component';

src/app/theme/components/baMenu/index.ts

@@ -0,0 +1 @@
+export * from './baMenu.component.ts';