<div id="complete-container">
  <mat-sidenav-container>
    <mat-sidenav opened="True" [style.width]="isExpanded ? expandedWidth : collapsedWidth" [mode]="mode">
      <app-sidebar *ngIf="isExpanded" [version]="version" [isExpanded]="isExpanded" (isExpandedEvent)="collapse($event)"></app-sidebar>
      <app-collapsed-sidebar *ngIf="!isExpanded" [version]="version" [isExpanded]="isExpanded" (isExpandedEvent)="collapse($event)"></app-collapsed-sidebar>
    </mat-sidenav>
    <mat-sidenav-content [style.margin-left]="isExpanded ? expandedWidth : collapsedWidth">
      <p>Main content</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

export class AppComponent {
  mobileQuery: MediaQueryList;
  private _mobileQueryListener: () => void;

  isExpanded: boolean;

  expandedWidth = '220px';
  collapsedWidth = '80px';
  mode: string;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 1366px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }

  ngOnInit(): void {
    if (this.mobileQuery.matches) {
      this.isExpanded = false;
    } else {
      this.isExpanded = true;
    }
    this.mode = 'side';
  }

  collapse(change: boolean) {
    this.isExpanded = !this.isExpanded;
    if (this.mobileQuery.matches && this.isExpanded) {
      this.mode = 'over';
    } else {
      this.mode = 'side';
    }
  }
}