ngx-admin/src/app/theme/components/baSidebar/baSidebar.html

46 lines
2.5 KiB
HTML
Raw Normal View History

2016-05-13 16:11:32 +03:00
<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
2016-04-27 13:17:51 +03:00
<ul class="al-sidebar-list">
2016-05-11 13:15:37 +03:00
<li *ngFor="let item of menuItems" class="al-sidebar-list-item"
2016-05-18 15:02:23 +03:00
[ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
2016-04-27 16:02:27 +03:00
2016-05-13 16:11:32 +03:00
<a *ngIf="!item.subMenu" [routerLink]="[item.component]" class="al-sidebar-list-link">
2016-04-27 16:02:27 +03:00
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
2016-04-29 17:27:19 +03:00
<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>
2016-04-29 17:27:19 +03:00
<b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
*ngIf="item.subMenu"></b>
</a>
2016-04-28 15:22:49 +03:00
<ul *ngIf="item.subMenu" class="al-sidebar-sublist"
2016-05-18 15:02:23 +03:00
[ngClass]="{'slide-right': item.slideRight}">
<li *ngFor="let subitem of item.subMenu" class="ba-sidebar-sublist-item"
2016-04-29 17:27:19 +03:00
[ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
2016-04-28 16:44:32 +03:00
<a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
2016-04-28 15:22:49 +03:00
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
2016-04-29 17:27:19 +03:00
<b class="fa" *ngIf="subitem.subMenu"
[ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
2016-04-28 15:22:49 +03:00
</a>
<ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
2016-04-28 16:37:07 +03:00
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
2016-05-11 13:15:37 +03:00
<li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
2016-04-29 17:27:19 +03:00
[ngClass]="{selected: subitem.selected}">
2016-05-13 16:11:32 +03:00
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[item.component, subitem.component, subSubitem.component]">
2016-04-28 15:22:49 +03:00
{{ subSubitem.title }}</a>
</li>
</ul>
2016-05-13 16:11:32 +03:00
<a *ngIf="!subitem.subMenu" [routerLink]="[item.component, subitem.component]"
2016-04-28 16:44:32 +03:00
(mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
2016-04-28 15:22:49 +03:00
{{ subitem.title}}
</a>
</li>
</ul>
2016-04-27 16:02:27 +03:00
</li>
2016-04-27 13:17:51 +03:00
</ul>
2016-04-28 16:44:32 +03:00
<div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
[ngClass]="{'show-hover-elem': showHoverElem }"></div>
2016-04-27 13:17:51 +03:00
</aside>