src/app/shared/layout/side-menu/components/side-menu-container/side-menu-container.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<ng-template #sideMenuTemplateRef>
  <div *ngIf="hasContent$ | async"
       [class.side-menu---collapsed]="!isOpen"
       [class.side-menu---left]="left$ | async"
       class="side-menu">


    <div class="side-menu--content">

      <ng-container *ngIf="(title$ | async)?.trim().length > 0">
        <div class="side-menu--content--title">
          {{title$ | async}}
        </div>
      </ng-container>

      <ng-container *ngFor="let directive of (content$ | async); let first = first;">
        <ng-container *ngIf="directive?.templateRef"
                      [ngTemplateOutlet]="directive?.templateRef">
        </ng-container>
        <div class="side-menu--content--spacing"></div>
      </ng-container>

    </div>

    <div (pointerdown)="isOpen = !isOpen"
         [class.side-menu--toggle-bar---collapsed]="!isOpen"
         [class.side-menu--toggle-bar---left]="left$ | async"
         class="side-menu--toggle-bar">
    </div>

  </div>
</ng-template>


<ng-container
  *ngIf="(left$ | async) === true"
  [ngTemplateOutlet]="sideMenuTemplateRef">
</ng-container>

<div class="main-content main-content---without-scroll">
  <div class="main-content">
    <ng-content></ng-content>
  </div>
</div>

<ng-container
  *ngIf="(left$ | async) !== true"
  [ngTemplateOutlet]="sideMenuTemplateRef">
</ng-container>