Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-15 04:38:05 +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

57
src/app/theme/components/baSidebar/baSidebar.html
View file

@ -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>