launcher.component.html

<div  fxFlex style="flex: 1 1 0%; box-sizing: border-box">
<div fxLayout="column" fxLayoutAlign="space-around stretch" style="height: 100%; width: 100%" >
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button (click)=idSideNav.toggle()><mat-icon>menu</mat-icon></button>

    <span>Strudel v2.0</span>
    <span class="fill-horizontal-space"></span>
    </mat-toolbar-row>
  </mat-toolbar>
<mat-sidenav-container style="height: 100%; width: 100%">
  <mat-sidenav #idSideNav mode="side" opened>
    <mat-accordion>

<!-- <mat-accordion> -->
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
            Login
        </mat-panel-title>
        </mat-expansion-panel-header>
        <div *ngFor="let sshauthzserver of (authService.loggedOutAuthZ | async)">
          <button mat-button (click)=login(sshauthzserver) fxFlex style="text-align: left"> Login to {{ sshauthzserver.name }}</button>
          <button mat-icon-button *ngIf="sshauthzserver.userdefined === true"><mat-icon>remove</mat-icon></button>
        </div>
        <div *ngFor="let sshauthzserver of (authService.loggedOutAuthZ | async)">
          <button mat-button (click)=signup(sshauthzserver) style="text-align: left"> Signup for {{ sshauthzserver.name }}</button>
        </div>
        <button mat-button (click) =logout() style="text-align: left">Logout</button>
        <button mat-button (click) ="authService.updateAgentContents()" style="text-align: left">Refresh</button>
        </mat-expansion-panel>
    <div *ngFor="let id of computeSitesService.appidentities | async">
	<mat-expansion-panel (click)=selectId(id)>
		<mat-expansion-panel-header>
			{{ id.displayName() }}
		</mat-expansion-panel-header>
        <app-strudelapplist [applist]=id.site.appCatalog [identity]="id"></app-strudelapplist>
	</mat-expansion-panel>
	</div>
    <mat-expansion-panel>
        <mat-expansion-panel-header>
            Advanced
        </mat-expansion-panel-header>
        Select an API server
        <div style="width: 100%">
        <mat-form-field>
        <mat-select [ngModel]="selectedApiServer" (selectionChange)="backendSelectionService.setApiServer($event.value)">
            <mat-option *ngFor="let apis of backendSelectionService.apiservers|async" [value]="apis">
                {{ apis.name }}
            </mat-option>
        </mat-select>
        </mat-form-field>
        </div>
        <button type="button" mat-button (click)="fileInput.click()">Load Config</button>
        <input hidden (change)="loadConfig($event)" accept=".json" #fileInput type="file" id="file">
        <button mat-button (click)=resetConfig()>Reset Config</button>
    </mat-expansion-panel>
	</mat-accordion>
</mat-sidenav>

  <app-joblist [identity]="identitySubject | async"></app-joblist>
  <div fxFlex></div>

</mat-sidenav-container>
</div>
</div>

<!-- <app-joblist></app-joblist> -->