<div class="container">
  <div class="row">
    <div class="row-with-sidebar row-offcanvas row-offcanvas-left px-0"
      [@pushInOut]="(isSidebarCollapsed$ | async) ? 'collapsed' : 'expanded'">
      @if (sideBarWidth > 0) {
        <div id="{{id}}-sidebar-content"
          [class.invisible]="(isSidebarCollapsed$ | async) === true && (isXsOrSm$ | async) === true"
          class="col-12 col-md-{{sideBarWidth}} sidebar-content {{sidebarClasses | async}}">
          <ng-container *ngTemplateOutlet="sidebarContent"></ng-container>
        </div>
      }
      <div class="col-12 col-md-{{12 - sideBarWidth}}"
        [class.px-0]="sideBarWidth === 0"
        [class.invisible]="(isSidebarCollapsed$ | async) !== true && (isXsOrSm$ | async) === true">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>
