Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-12 12:38:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
nixa 2016-07-08 18:03:48 +03:00
parent 5b66c255ad
commit 0ee317bc4d
15 changed files with 394 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/app/theme/components/baSidebar/baSidebar.component.ts
View file

@ -1,60 +1,42 @@
import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
import {Router} from '@angular/router';
import {AppState} from '../../../app.state';
import {layoutSizes} from '../../../theme';
import {BaSlimScroll} from '../../../theme/directives';
import {BaSidebarService} from './baSidebar.service';
import {BaMenu} from '../baMenu';
import {routes} from '../../../../app/app.routes';
@Component({
selector: 'ba-sidebar',
encapsulation: ViewEncapsulation.None,
styles: [require('./baSidebar.scss')],
template: require('./baSidebar.html'),
providers: [BaSidebarService],
directives: [BaSlimScroll]
providers: [],
directives: [BaMenu]
})
export class BaSidebar {
public menuItems:Array<any>;
// here we declare which routes we want to use as a menu in our sidebar
public routes = routes;
public menuHeight:number;
public isMenuCollapsed:boolean = false;
public showHoverElem:boolean;
public hoverElemHeight:number;
public hoverElemTop:number;
public outOfArea:number = -200;
public isMenuShouldCollapsed:boolean = false;
protected _onRouteChange;
constructor(private _elementRef:ElementRef,
private _router:Router,
private _sidebarService:BaSidebarService,
private _state:AppState) {
this.menuItems = this._sidebarService.getMenuItems();
this._onRouteChange = this._router.events.subscribe(() => {
this._selectMenuItem();
});
constructor(private _elementRef:ElementRef, private _state:AppState) {
this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
this.isMenuCollapsed = isCollapsed;
});
}
public ngOnInit():void {
if (this._shouldMenuCollapse()) {
this.menuCollapse();
}
}
public ngOnDestroy():void {
this._onRouteChange.unsubscribe();
}
public ngAfterViewInit():void {
this.updateSidebarHeight();
setTimeout(() => this.updateSidebarHeight());
}
@HostListener('window:resize')
@ -82,45 +64,12 @@ export class BaSidebar {
this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
}
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 updateSidebarHeight():void {
// TODO: get rid of magic 84 constant
this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
}
public toggleSubMenu($event, item):boolean {
var submenu = jQuery($event.currentTarget).next();
if (this.isMenuCollapsed) {
this.menuExpand();
if (!item.expanded) {
item.expanded = true;
}
} else {
item.expanded = !item.expanded;
submenu.slideToggle();
}
return false;
}
private _shouldMenuCollapse():boolean {
return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
}
private _selectMenuItem():void {
let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems);
this._state.notifyDataChanged('menu.activeLink', currentMenu);
// hide menu after natigation on mobile devises
if (this._shouldMenuCollapse()) {
this.menuCollapse();
}
}
}