Вертикальное HamburgerMenu с динамическим c Contentwidth

Question

Я построил вертикально складываемое меню гамбургера. Использование только CSS и Bootstrap4. Я использую Angular 8.

Это должно выглядеть так: не свернуто свернуто

• Итак, чтобы обернуть это, что мне нужно это:
  • Построить переход для контента для перехода влево. Таким образом, переход меню и переход контента выравниваются идеально.
  • Подход setTimeout не является оптимальным, я полагаю, есть какие-то советы по улучшению?

Вид:

<div class="container">
        <div class="row">
                <div [ngClass]="{'col-xl-3': !isCollapsed, 'col-xl-1': isCollapsed}">
                        <div>
                                <button role="button" class="btn btn-light btn-outline-dark" (click)="onCollapse()"
                                        data-toggle="collapse" data-target="#tree"><span class="k-icon k-i-rows"></span>
                                </button>
                                <div id="tree" class="collapse show width">
                                        <div style="width:475px;">
                                                menu content
                                        </div>
                                </div>
                        </div>
                </div>
                <div [ngClass]="{'col-xl-9': !isCollapsed, 'col-xl-11': isCollapsed}">
                        <div>
                                content
                        </div>
                </div>
        </div>
</div>

S CSS:

.collapse {
  visibility: hidden;
}
.collapse.show {
  visibility: visible;
  display: block;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

Компонент:

import { Component, OnInit } from "@angular/core";


@Component({
  selector: "root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  public title = "app";
  public isCollapsed: boolean = false;

  constructor() {
  }


  public onCollapse() {
    if (this.isCollapsed) {
      setTimeout(() => {
        this.isCollapsed = !this.isCollapsed;
      }, 100);
    } else {
      setTimeout(() => {
        this.isCollapsed = !this.isCollapsed;
      }, 150);
    }
  }


  public ngOnInit() {
  }
}