Revision 59728
Added by Konstantinos Triantafyllou over 3 years ago
sideBar.component.html | ||
---|---|---|
1 |
<aside id="sidebar_main" >
|
|
1 |
<aside id="sidebar_main"> |
|
2 | 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 |
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl"> |
|
9 |
<div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div> |
|
10 |
<div *ngIf="headerName" class="uk-disabled uk-text-muted uk-text-center">{{headerName}}</div> |
|
11 |
</a> |
|
12 |
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top"> |
|
13 |
<ul class="uk-margin-large-top uk-list"> |
|
14 |
<!-- <li *ngIf="headerName"><a--> |
|
15 |
<!-- class="uk-disabled"><span class="menu_title uk-text-muted uk-text-uppercase">{{headerName}}</span></a></li>--> |
|
16 |
<ng-template ngFor [ngForOf]="items" let-item let-i="index"> |
|
17 |
<li [class.current_section]="isTheActiveMenuItem(item)" |
|
18 |
[class.act_section]="item.open" |
|
19 |
[title]="item.title" |
|
20 |
[class.submenu_trigger]="item.items.length > 1" [class.uk-margin]="!isTheActiveMenuItem(item)"> |
|
21 |
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null" |
|
22 |
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center" [class.uk-text-bold]="isTheActiveMenuItem(item)"> |
|
23 |
<div *ngIf="item.icon && !open" class="menu_icon uk-margin-auto"> |
|
24 |
<span [innerHTML]="satinizeHTML(item.icon)"></span> |
|
25 |
</div> |
|
26 |
<div *ngIf="!item.icon && !open" class="menu_icon uk-margin-auto"><i class="material-icons">donut_large</i></div> |
|
27 |
<span class="menu_title" [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-text-center"> |
|
31 |
<div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div> |
|
32 |
<span class="menu_title " [class.uk-text-small]="!open">{{item.title}}</span> |
|
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 |
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl"> |
|
9 |
<div *ngIf="!headerLogoUrl" class="portalLogo logo"></div> |
|
10 |
<div *ngIf="headerName" class="uk-disabled uk-text-muted uk-text-center">{{headerName}}</div> |
|
11 |
</a> |
|
12 |
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top"> |
|
13 |
<ul class="uk-list"> |
|
14 |
<ng-template ngFor [ngForOf]="items" let-item let-i="index"> |
|
15 |
<li [class.uk-active]="isTheActiveMenuItem(item)" |
|
16 |
[class.act_section]="item.open" |
|
17 |
[class.submenu_trigger]="item.items.length > 1"> |
|
18 |
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null" |
|
19 |
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center"> |
|
20 |
<div *ngIf="item.icon && !open" class="uk-margin-auto"> |
|
21 |
<span [innerHTML]="satinizeHTML(item.icon)"></span> |
|
22 |
</div> |
|
23 |
<div *ngIf="!item.icon && !open" class="uk-margin-auto"><i |
|
24 |
class="material-icons">donut_large</i></div> |
|
25 |
<span [class.uk-text-small]="!open">{{item.title}}</span> |
|
26 |
</a> |
|
27 |
<ng-template [ngIf]="item.items.length > 1"> |
|
28 |
<a (click)="item.open = !item.open"> |
|
29 |
<div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div> |
|
30 |
<span [class.uk-text-small]="!open">{{item.title}}</span> |
|
33 | 31 |
|
32 |
</a> |
|
33 |
<ul [style.display]="(item.open?'block':'none')"> |
|
34 |
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index"> |
|
35 |
<li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)"> |
|
36 |
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null" |
|
37 |
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling"> |
|
38 |
<div *ngIf="subItem.icon"><i class="material-icons">{{subItem.icon}}</i></div> |
|
39 |
<span>{{subItem.title}}</span> |
|
40 |
</a> |
|
41 |
</li> |
|
42 |
</ng-template> |
|
43 |
</ul> |
|
44 |
</ng-template> |
|
45 |
</li> |
|
46 |
</ng-template> |
|
47 |
</ul> |
|
48 |
</div> |
|
49 |
<ng-template [ngIf]="specialMenuItem"> |
|
50 |
<div class="special_section uk-margin-large-top"> |
|
51 |
<ul class="uk-list"> |
|
52 |
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)"> |
|
53 |
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" class="uk-text-center"> |
|
54 |
<span class="uk-margin-small-right" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span> |
|
55 |
<span [ngClass]="specialMenuItem.customClass" |
|
56 |
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span> |
|
34 | 57 |
</a> |
35 |
<ul [style.display]="(item.open?'block':'none')" class="uk-text-center"> |
|
36 |
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index"> |
|
37 |
<li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(item, subItem)" [class.current_section]="isTheActiveMenuItem(subItem)"> |
|
38 |
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null" |
|
39 |
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling"> |
|
40 |
<div *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></div> |
|
41 |
<span class="menu_title ">{{subItem.title}}</span> |
|
42 |
</a> |
|
43 |
</li> |
|
44 |
</ng-template> |
|
45 |
</ul> |
|
46 |
</ng-template> |
|
47 |
</li> |
|
48 |
</ng-template> |
|
49 |
</ul> |
|
50 |
<ng-template [ngIf]="specialMenuItem"> |
|
51 |
<ul class="searchLink uk-margin-large-top uk-list"> |
|
52 |
<li [class.current_section]="isTheActiveUrl(specialMenuItem.route)" [title]="specialMenuItem.title" |
|
53 |
[class.uk-margin]="!isTheActiveUrl(specialMenuItem.route)" > |
|
54 |
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" class="uk-text-center"> |
|
55 |
<span class="menu_icon uk-margin-small-right " [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span> |
|
56 |
<span class="menu_title" |
|
57 |
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span> |
|
58 |
</a> |
|
59 |
</li> |
|
60 |
</ul> |
|
58 |
</li> |
|
59 |
</ul> |
|
60 |
</div> |
|
61 | 61 |
</ng-template> |
62 | 62 |
</div> |
63 |
</div> |
|
64 | 63 |
<div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable " |
65 |
(click)="toggleOpen($event)" >
|
|
66 |
<span class="uk-position-center" *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5" ></span>
|
|
67 |
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
|
|
64 |
(click)="toggleOpen($event)"> |
|
65 |
<span class="uk-position-center" *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5"></span>
|
|
66 |
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
|
|
68 | 67 |
</div> |
69 | 68 |
</aside> |
Also available in: Unified diff
[Library | Trunk]: Change sidebar, add some icons