mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-14 12:24:21 +01:00
feat(sidebar): menu separated from sidebar, menu merged with routes
This commit is contained in:
nixa
parent
5b66c255ad
commit
0ee317bc4d
15 changed files with 394 additions and 191 deletions
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,6 @@
|
|||
<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
|
||||
<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}">
|
||||
|
||||
|
||||
<a *ngIf="!item.path && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
</a>
|
||||
<a *ngIf="item.path && !item.subMenu" [routerLink]="[item.path]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
</a>
|
||||
|
||||
<a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)"
|
||||
class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
<b class="fa fa-angle-down"
|
||||
*ngIf="item.subMenu"></b>
|
||||
</a>
|
||||
|
||||
<ul *ngIf="item.subMenu" class="al-sidebar-sublist"
|
||||
[ngClass]="{'slide-right': item.slideRight}">
|
||||
<li *ngFor="let subitem of item.subMenu" class="ba-sidebar-sublist-item"
|
||||
[ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
|
||||
<a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
|
||||
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
|
||||
<b class="fa" *ngIf="subitem.subMenu"
|
||||
[ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
|
||||
</a>
|
||||
<ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
|
||||
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
|
||||
<li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
|
||||
[ngClass]="{selected: subitem.selected}">
|
||||
<a *ngIf="!item.path" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
|
||||
{{ subSubitem.title }}</a>
|
||||
<a *ngIf="item.path" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.path, subitem.path]">
|
||||
{{ subSubitem.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a *ngIf="!item.path && !subitem.subMenu" [attr.href]="subitem.url || ''" [routerLink]="[subitem.path || '']"
|
||||
(mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
|
||||
{{ subitem.title}}
|
||||
</a>
|
||||
<a *ngIf="item.path && !subitem.subMenu" [routerLink]="[item.path, subitem.path]"
|
||||
(mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
|
||||
{{ subitem.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
|
||||
[ngClass]="{'show-hover-elem': showHoverElem }"></div>
|
||||
<ba-menu [menuRoutes]="routes"
|
||||
[menuHeight]="menuHeight"
|
||||
[sidebarCollapsed]="isMenuCollapsed"
|
||||
(expandMenu)="menuExpand()"></ba-menu>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ a.al-sidebar-list-link {
|
|||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
> li {
|
||||
> ba-menu-item > li {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {menuItems} from '../../../app.menu';
|
||||
import {Router, UrlTree} from "@angular/router";
|
||||
|
||||
@Injectable()
|
||||
export class BaSidebarService {
|
||||
|
||||
private _router:Router;
|
||||
|
||||
public getMenuItems():Array<Object> {
|
||||
return menuItems;
|
||||
}
|
||||
|
||||
public setRouter(router:Router):BaSidebarService {
|
||||
this._router = router;
|
||||
return this;
|
||||
}
|
||||
|
||||
public selectMenuItem(items:Array<any>) {
|
||||
let currentMenu;
|
||||
|
||||
let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
|
||||
|
||||
items.forEach((menu:any) => {
|
||||
|
||||
this._selectItem([menu.path], menu);
|
||||
assignCurrent(menu);
|
||||
|
||||
if (menu.subMenu) {
|
||||
menu.subMenu.forEach((subMenu) => {
|
||||
this._selectItem([menu.path, subMenu.path], subMenu, menu);
|
||||
assignCurrent(subMenu);
|
||||
});
|
||||
}
|
||||
});
|
||||
return currentMenu;
|
||||
}
|
||||
|
||||
private _selectItem(instructions, item, parentMenu = null) {
|
||||
let route = this._generateRoute(instructions);
|
||||
item.selected = !item.disabled && this._isCurrent(route);
|
||||
if (parentMenu) {
|
||||
parentMenu.expanded = parentMenu.expanded || item.selected;
|
||||
}
|
||||
}
|
||||
|
||||
private _isCurrent(route:UrlTree):boolean {
|
||||
if (route) {
|
||||
return this._router.url === this._router.serializeUrl(route);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private _generateRoute(instructions:any[]):UrlTree {
|
||||
instructions = instructions.filter(item => !!item);
|
||||
|
||||
if (instructions.length != 0) {
|
||||
return this._router.createUrlTree(instructions);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue