Change special menu item style and move it to top

This commit is contained in:
Konstantinos Triantafyllou 2022-08-04 17:58:45 +03:00
parent a33226250b
commit 3f7078db16
1 changed files with 14 additions and 18 deletions

View File

@ -1,6 +1,19 @@
<aside id="sidebar_main">
<div id="sidebar_content">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
<ng-template [ngIf]="specialMenuItem">
<div class="menu_section uk-margin-large-top">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling" class="uk-button uk-button-link uk-margin-left">
<h6 class="uk-margin-remove-bottom 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-left">{{specialMenuItem.title}}</span>
</h6>
</a>
</div>
</ng-template>
<div *ngIf="items.length > 0" class="menu_section" [class.uk-margin-xlarge-top]="!specialMenuItem" [class.uk-margin-large-top]="specialMenuItem" style="min-height: 30vh">
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
<li [class.uk-active]="isTheActiveMenuItem(item)"
@ -20,22 +33,5 @@
</ng-template>
</ul>
</div>
<ng-template [ngIf]="specialMenuItem">
<div class="menu_section uk-margin-large-top">
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<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>
</aside>