|
1
|
<aside id="sidebar_main">
|
|
2
|
<div id="sidebar_content">
|
|
3
|
<a *ngIf="showHeader" class="sidebar_main_header uk-text-center" [href]="headerUrl"
|
|
4
|
[class.uk-disabled]="(!headerUrl)">
|
|
5
|
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
|
|
6
|
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
|
7
|
[alt]="properties.environment">
|
|
8
|
<div class="logo" [class.portal-logo]="!headerLogoUrl">
|
|
9
|
<img *ngIf="headerLogoUrl" [src]="headerLogoUrl">
|
|
10
|
<div *ngIf="logoLabel" class="logo-label uk-position-bottom-right">{{logoLabel}}</div>
|
|
11
|
</div>
|
|
12
|
<div *ngIf="headerName" class="uk-disabled uk-text-muted uk-margin-small-left uk-margin-small-right" [class.uk-text-center]="!open" [ngClass]="open?('uk-text-' + headerPosition):''">{{headerName}}</div>
|
|
13
|
</a>
|
|
14
|
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
|
|
15
|
<ul class="uk-list uk-nav-parent-icon" uk-nav>
|
|
16
|
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
|
|
17
|
<li [class.uk-active]="isTheActiveMenuItem(item)"
|
|
18
|
[class.uk-open]="isTheActiveMenuItem(item)"
|
|
19
|
[class.uk-parent]="item.items.length > 1">
|
|
20
|
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
|
|
21
|
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
|
|
22
|
<div *ngIf="item.icon && !open" class="uk-margin-auto">
|
|
23
|
<span [innerHTML]="satinizeHTML(item.icon)"></span>
|
|
24
|
</div>
|
|
25
|
<!-- <div *ngIf="!item.icon && !open" class="uk-margin-auto"><i
|
|
26
|
class="material-icons">donut_large</i></div>-->
|
|
27
|
<span [class.uk-text-small]="!open">{{item.title}}</span>
|
|
28
|
</a>
|
|
29
|
<ng-template [ngIf]="item.items.length > 1">
|
|
30
|
<a (click)="item.open = !item.open" class=" uk-parent uk-text-center">
|
|
31
|
<div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div>
|
|
32
|
<span [class.uk-text-small]="!open">{{item.title}}</span>
|
|
33
|
|
|
34
|
</a>
|
|
35
|
<ul [class.uk-hidden]="!open" class="uk-nav-sub uk-text-center">
|
|
36
|
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
|
|
37
|
<li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)">
|
|
38
|
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
|
|
39
|
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
|
|
40
|
<div *ngIf="subItem.icon"><i class="material-icons">{{subItem.icon}}</i></div>
|
|
41
|
<span>{{subItem.title}}</span>
|
|
42
|
</a>
|
|
43
|
</li>
|
|
44
|
</ng-template>
|
|
45
|
</ul>
|
|
46
|
</ng-template>
|
|
47
|
</li>
|
|
48
|
</ng-template>
|
|
49
|
</ul>
|
|
50
|
</div>
|
|
51
|
<ng-template [ngIf]="specialMenuItem">
|
|
52
|
<div class="special_section uk-margin-large-top">
|
|
53
|
<ul class="uk-list">
|
|
54
|
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
|
|
55
|
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
|
|
56
|
[queryParamsHandling]="queryParamsHandling" class="uk-text-center">
|
|
57
|
<span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
|
|
58
|
<span [ngClass]="specialMenuItem.customClass"
|
|
59
|
[class.uk-margin-small-left]="open"
|
|
60
|
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
|
|
61
|
</a>
|
|
62
|
</li>
|
|
63
|
</ul>
|
|
64
|
</div>
|
|
65
|
</ng-template>
|
|
66
|
</div>
|
|
67
|
<div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable "
|
|
68
|
(click)="toggleOpen($event)">
|
|
69
|
<span class="uk-position-center" *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5"></span>
|
|
70
|
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
|
|
71
|
</div>
|
|
72
|
</aside>
|