dspace-angular/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

<div class="sidebar-section" [ngClass]="{'expanded': (expanded | async)}"
    [@bgColor]="{
     value: ((expanded | async) ? 'endBackground' : 'startBackground'),
     params: {endColor: (sidebarActiveBg | async)}}">
  <a class="nav-item nav-link d-flex flex-row flex-nowrap"
     attr.aria-labelledby="sidebarName-{{section.id}}"
     [title]="('menu.section.icon.' + section.id) | translate"
     (click)="toggleSection($event)"
     (keyup.space)="$event.stopPropagation(); toggleSection($event)"
     href="javascript:void(0);"
  >
    <div class="shortcut-icon h-100">
      <i class="fas fa-{{section.icon}} fa-fw"></i>
    </div>
    <div class="sidebar-collapsible">
      <div class="toggle">
        <span id="sidebarName-{{section.id}}" class="section-header-text">
          <ng-container
            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
        </span>
        <i class="fas fa-chevron-right fa-pull-right"
           [@rotate]="(expanded | async) ? 'expanded' : 'collapsed'"
           [title]="('menu.section.toggle.' + section.id) | translate"
        ></i>
      </div>
      <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(expanded | async)">
        <li *ngFor="let subSection of (subSections$ | async)">
          <ng-container
            *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
        </li>
      </ul>
    </div>
  </a>
</div>