@engie-group/fluid-design-system-angular/src/components/sidebar/sidebar.component.html

Fluid Design System Angular

<div class="nj-sidebar__brand" *ngIf="logo?.templateRef as templateRef">
  <ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{isFolded}"></ng-container>
</div>
<nav class="nj-sidebar__navigation">
  <nj-list-group [isDense]="true" [hasBorder]="false">
    <ng-content></ng-content>
  </nj-list-group>
</nav>
<nav *ngIf="footerElements?.length" class="nj-sidebar__navigation nj-sidebar__navigation--footer">
  <nj-list-group [isDense]="true" [hasBorder]="false">
    <ng-container *ngFor="let footerElement of footerElements" [ngTemplateOutlet]="footerElement.templateRef">
    </ng-container>
  </nj-list-group>
</nav>
<nj-list-group *ngIf="hasFoldItem" class="nj-sidebar__collapse" [isDense]="true" [hasBorder]="false">
  <li nj-list-item njSidebarItem class="nj-sidebar__fold-btn" type="button" iconName="chevron_left" (itemClick)="foldItemClicked.next($event)">
    {{foldItemLabel}}
  </li>
</nj-list-group>