48 lines
2.6 KiB
HTML
48 lines
2.6 KiB
HTML
<aside id="sidebar_main">
|
|
<div id="sidebar_content">
|
|
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
|
|
<div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
|
|
<ul class="uk-list uk-nav-parent-icon" uk-nav>
|
|
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
|
|
<li [class.uk-active]="isTheActiveMenuItem(item)"
|
|
[class.uk-open]="isTheActiveMenuItem(item)"
|
|
[class.uk-parent]="item.items.length > 1">
|
|
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null"
|
|
[title]="item.title"
|
|
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
|
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
|
<div *ngIf="item.icon" class="uk-width-auto">
|
|
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" [svg]="item.icon.svg" [flex]="true"></icon>
|
|
</div>
|
|
<span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ng-template>
|
|
</ul>
|
|
</div>
|
|
<ng-template [ngIf]="specialMenuItem">
|
|
<div class="menu_section uk-margin-large-top">
|
|
<ul class="uk-list">
|
|
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
|
|
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
|
|
[queryParamsHandling]="queryParamsHandling">
|
|
<div class="uk-flex uk-flex-middle uk-flex-center">
|
|
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
|
|
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
|
|
</div>
|
|
<span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
<!-- <div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable"
|
|
(click)="toggleOpen($event)">
|
|
<span class="uk-position-center" *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5"></span>
|
|
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
|
|
</div>-->
|
|
</aside>
|