corrections to the layout

src/app/app.component.html

@@ -7,15 +7,9 @@
 </div> -->
 
 <!--<app-launcher></app-launcher>-->
-<mat-sidenav-container style="height: 100vh; width: 100%">
-    <!--<mat-sidenav-container>-->
-    <mat-sidenav closed>
-    </mat-sidenav>
-    <mat-sidenav-content>
-        <div fxLayout="column" fxLayoutAlign="none" style="height: 100%; width: 100%">
-        <mat-toolbar color="primary">
-            <div fxLayout="row" style="width: 100%">
-              <mat-toolbar-row style="width: 100%">
+<div style="height: 100%" fxLayout="column">
+<mat-toolbar color="primary">
+              <mat-toolbar-row>
                     <button mat-icon-button *ngIf="settingsService.useMenu$ | async" aria-label="toggle menu" (click)=toggleMenu()><mat-icon>menu</mat-icon></button>
                     <img src="assets/MASSIVElogoTransparent128x128.png" style="width: auto; height: 90%">
                     <span>Strudel2</span>
@@ -47,7 +41,6 @@
                                  matBadgeColor="warn" 
                                  matBadgeOverlap="false" matBadgeSize="small"
                                  style="text-align: left; margin-left: 15px; margin-top: 10px">
-                            <!--<span>-->
                             {{ id.displayName() }} 
                             </span>
                         </button>
@@ -57,11 +50,14 @@
 
                     </mat-menu>
                 </mat-toolbar-row>
-            </div>
-          </mat-toolbar>
-          <div>
+</mat-toolbar>
+<mat-sidenav-container fxFlex style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
+    <mat-sidenav closed>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <div fxLayout="column" fxLayoutAlign="start none" style="height: 100%; width: 100%;">
           <router-outlet></router-outlet>
-          </div>
         </div>
     </mat-sidenav-content>
 </mat-sidenav-container>
+</div>

src/app/app.component.ts

@@ -4,9 +4,9 @@ import { AuthorisationService} from './authorisation.service';
 import { ComputesitesService} from './computesites.service';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import { MatSnackBar } from '@angular/material';
-import {OverlayContainer} from '@angular/cdk/overlay';
 import { Computesite, Health } from './computesite';
 import {SettingsService } from './settings.service';
+import {OverlayContainer} from '@angular/cdk/overlay';
 
 
 
@@ -29,7 +29,8 @@ export class AppComponent {
               private authService: AuthorisationService,
               private computeSitesService: ComputesitesService,
               private settingsService: SettingsService,
-              public snackBar: MatSnackBar) {
+              public snackBar: MatSnackBar,
+              private overlayContainer: OverlayContainer) {
 
    };
 
@@ -67,7 +68,9 @@ export class AppComponent {
     if (theme == null) {
       theme = 'strudel-theme-light';
     }
-    let classList = document.querySelector('app-root').classList
+    let container = document.querySelector('app-root');
+    //let container = this.overlayContainer.getContainerElement();
+    let classList = container.classList;
     var c;
     for (c of classList.value.split(' ')) {
       if (c.indexOf('strudel-') == 0) {

src/app/launcher/launcher.component.html

-<!--<div  fxFlex style="flex: 1 1 0%; box-sizing: border-box">-->
-<div fxLayout="column" fxLayoutAlign="none" style="height: 100%">
-        <div *ngIf="!(settingsService.useMenu$ | async)">
-            <mat-divider></mat-divider>
-            <div *ngIf="(identity$ | async) !== null" style="width: 100%">
-                <nav mat-tab-nav-bar color=accent backgroundColor=primary>
-                <a mat-tab-link
-                   [routerLink]="['/launch',identity$.value.displayName(),'accountinfo']"
-                   routerLinkActive #rla="routerLinkActive"
-                    [active]="rla.isActive">
-                    Account Info
-                </a>
-                <a mat-tab-link
-                *ngFor="let app of (identity$.value.site.appCatalog | async)"
-                   [routerLink]="['/launch',identity$.value.displayName(),app.name]"
-                   routerLinkActive #rla="routerLinkActive"
-                    [active]="rla.isActive">
-                    {{ app.name }}
-                </a>
-                </nav>
-            </div>
+<div  fxFlex style="flex: 1 1 0%; box-sizing: border-box">
+<mat-sidenav-container fxFlexFill autosize>
+    <mat-sidenav #idSideNav mode="side" [opened]="(settingsService.menuToggle$ | async) && (settingsService.useMenu$ | async)">
+        <div fxLayout="column" fxLayout="stretch" style="height: 100%">
+            <nav>
+            <mat-accordion style="width: 100%" [displayMode]="flat">
+                <div *ngFor="let id of (computeSitesService.appidentities | async)">
+                    <!--<mat-expansion-panel (afterExpand)="selectId(id)" (closed)="selectId(id)" style="width: 100%">-->
+                    <mat-expansion-panel style="width: 100%" [expanded]="(identity$ | async) === id">
+                        <mat-expansion-panel-header>
+                        <mat-panel-title>
+                            <span fxFlex matBadge="{{ countErrors((id.systemalerts | async), (id.accountalerts | async)) }}" 
+                                                      [matBadgeHidden]= "countErrors((id.systemalerts | async), (id.accountalerts | async)) == 0"  
+                                                      matBadgePosition="above before" 
+                                                      matBadgeColor="warn" 
+                                                      matBadgeOverlap="false" matBadgeSize="small"
+                                                      style="text-align: left; margin-left: 20px; margin-top: 10px" >
+                                {{ id.displayName() }}
+                            </span>
+                            </mat-panel-title>
+                        </mat-expansion-panel-header>
+                        <mat-list style="width: 100%">
+
+                            <mat-list-item>
+                                <button mat-button  style="width: 100%; text-align: left"
+                                   [routerLink]="['/launch',id.displayName(),'accountinfo']"
+                                   routerLinkActive #rla="routerLinkActive">
+                                    Account Info
+                                </button>
+                        </mat-list-item>
+                        <app-strudelapplist [applist]=id.site.appCatalog [identity]="id" (appChange)="selectApp($event)" style="width: 100%"></app-strudelapplist>
+                        </mat-list>
+                    </mat-expansion-panel>
+                </div>
+            </mat-accordion>
+            </nav>
         </div>
+        <div fxFlex></div>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <div fxLayout="column" fxLayoutAlign="start none" style="height: 100%">
+            <div *ngIf="!(settingsService.useMenu$ | async)">
+                <mat-divider inset=true></mat-divider>
+                <div *ngIf="(identity$ | async) !== null" style="width: 100%">
+                    <nav mat-tab-nav-bar color=accent backgroundColor=primary>
+                    <a mat-tab-link
+                       [routerLink]="['/launch',identity$.value.displayName(),'accountinfo']"
+                       routerLinkActive #rla="routerLinkActive"
+                        [active]="rla.isActive">
+                        Account Info
+                    </a>
+                    <a mat-tab-link
+                    *ngFor="let app of (identity$.value.site.appCatalog | async)"
+                       [routerLink]="['/launch',identity$.value.displayName(),app.name]"
+                       routerLinkActive #rla="routerLinkActive"
+                        [active]="rla.isActive">
+                        {{ app.name }}
+                    </a>
+                    </nav>
+                </div>
+            </div>
 
-    <!--<div *ngIf="identitySubject.value !== undefined && identitySubject.value !== null && appSubject.value === null"  style="padding-left: 5%; padding-right: 5%; padding-top: 5%;">-->
 
-            <div *ngIf="(app$ | async) == null" style="padding-left: 5%; padding-right: 5%; padding-top: 5%; overflow-y: scroll">
+            <div *ngIf="(app$ | async) == null" style="padding-left: 5%; padding-right: 5%; padding-top: 5%;">
                 <app-accountinfo [identity$]="identity$" [app$]="app$"></app-accountinfo>
             </div>
             <div *ngIf="identity$.value !== undefined &&  identity$.value !== null && app$.value !== undefined && app$.value !== null" style="padding-left: 5%; padding-right: 5%; padding-top: 5%;">
                 <app-launch-dialog [identity]="identity$ | async" [appSubject]="app$"></app-launch-dialog>
-                <div style="height: 5%"></div>
-                <mat-divider ></mat-divider>
-                <div style="overflow-y: scroll">
-                    <app-joblist [identitySubject]="identity$" [appSubject]="app$"></app-joblist>
-                </div>
+                <app-joblist [identitySubject]="identity$" [appSubject]="app$"></app-joblist>
             </div>
+            
+
+        </div>
+    </mat-sidenav-content>
+</mat-sidenav-container>
 </div>