Fix nested lists HTML markup
This commit is contained in:
parent
fe62406e50
commit
bc2a055bc8
|
@ -123,6 +123,7 @@
|
||||||
<ul [ngClass]="[ menuSection.key, 'menu-block' ]">
|
<ul [ngClass]="[ menuSection.key, 'menu-block' ]">
|
||||||
<li i18n class="block-title">{{ menuSection.title }}</li>
|
<li i18n class="block-title">{{ menuSection.title }}</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
<ul>
|
<ul>
|
||||||
<li *ngFor="let link of menuSection.links">
|
<li *ngFor="let link of menuSection.links">
|
||||||
<a class="menu-link" [routerLink]="link.path" routerLinkActive="active">
|
<a class="menu-link" [routerLink]="link.path" routerLinkActive="active">
|
||||||
|
@ -131,6 +132,7 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
|
<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
|
||||||
<ul *ngFor="let menuEntry of menuEntries; index as id">
|
<ul *ngFor="let menuEntry of menuEntries; index as id">
|
||||||
|
|
||||||
|
@if (isDisplayed(menuEntry)) {
|
||||||
|
|
||||||
|
@if (menuEntry.routerLink) {
|
||||||
<li *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)">
|
<li *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)">
|
||||||
<a
|
<a
|
||||||
class="sub-menu-entry" [routerLink]="menuEntry.routerLink" routerLinkActive="active"
|
class="sub-menu-entry" [routerLink]="menuEntry.routerLink" routerLinkActive="active"
|
||||||
#routerLink (click)="onActiveLinkScrollToTop(routerLink)" ariaCurrentWhenActive="page"
|
#routerLink (click)="onActiveLinkScrollToTop(routerLink)" ariaCurrentWhenActive="page"
|
||||||
>{{ menuEntry.label }}</a>
|
>{{ menuEntry.label }}</a>
|
||||||
</li>
|
</li>
|
||||||
|
} @else if (isInSmallView) { <!-- On mobile, use a modal to display sub menu items -->
|
||||||
<ng-container *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)">
|
|
||||||
<!-- On mobile, use a modal to display sub menu items -->
|
|
||||||
@if (isInSmallView) {
|
|
||||||
<li>
|
<li>
|
||||||
<button class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" (click)="openModal(id)">
|
<button class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" (click)="openModal(id)">
|
||||||
{{ menuEntry.label }}
|
{{ menuEntry.label }}
|
||||||
|
@ -20,10 +20,8 @@
|
||||||
</li>
|
</li>
|
||||||
} @else {
|
} @else {
|
||||||
<!-- On desktop, use a classic dropdown -->
|
<!-- On desktop, use a classic dropdown -->
|
||||||
<div ngbDropdown #dropdown="ngbDropdown" autoClose="true" container="body">
|
<li ngbDropdown #dropdown="ngbDropdown" autoClose="true" container="body">
|
||||||
<li>
|
|
||||||
<button ngbDropdownToggle class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }">{{ menuEntry.label }}</button>
|
<button ngbDropdownToggle class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }">{{ menuEntry.label }}</button>
|
||||||
</li>
|
|
||||||
|
|
||||||
<ul ngbDropdownMenu>
|
<ul ngbDropdownMenu>
|
||||||
<li *ngFor="let menuChild of menuEntry.children">
|
<li *ngFor="let menuChild of menuEntry.children">
|
||||||
|
@ -39,9 +37,9 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</li>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</ng-container>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue