<d-layout class="da-layout-wrapper">
  <d-aside
    *ngIf="config.sidebar.fixed"
    class="da-layout-aside-wrapper"
    [ngStyle]="{
      display: config.sidebar.hidden ? 'none' : null,
      width: getSidebarWidth(),
      flex: '0 0 ' + getSidebarWidth()
    }"
  ></d-aside>
  <d-aside
    class="da-layout-aside-wrapper"
    [class.da-no-sec-sidebar]="config.sidebar.secSidebar?.hidden"
    [class.da-layout-aside-fixed]="config.sidebar.fixed"
    [class.da-sidebar-top]="config.mode === 'sidebarTop'"
    [ngStyle]="{
      display: config.sidebar.hidden ? 'none' : null,
      zIndex: config.sidebar.zIndex,
      paddingTop: config.mode === 'headerTop' ? getHeaderHeight() : 0
    }"
  >
    <ng-content select="da-layout-sidebar"></ng-content>
    <ng-content select="da-layout-sec-sidebar"></ng-content>
  </d-aside>
  <d-layout>
    <d-header
      *ngIf="config.header?.fixed"
      class="da-layout-header-wrapper"
      [ngStyle]="{
        display: config.header?.hidden ? 'none' : null,
        height: getHeaderHeight()
      }"
    ></d-header>
    <d-header
      class="da-layout-header-wrapper"
      [class.da-no-sec-header]="config.header?.secHeader?.hidden"
      [class.da-layout-header-fixed]="config.header?.fixed"
      [ngStyle]="{
        width: config.header?.fixed && config.mode === 'sidebarTop' ? 'calc(100% - ' + getSidebarWidth() + ')' : null,
        display: config.header?.hidden ? 'none' : null,
        zIndex: config.header?.zIndex
      }"
    >
      <ng-content select="da-layout-header"></ng-content>
      <ng-content select="da-layout-sec-header"></ng-content>
    </d-header>
    <d-content class="da-layout-content-wrapper">
      <ng-content></ng-content>
    </d-content>
    <d-footer class="da-layout-footer-wrapper">
      <ng-content select="da-layout-footer"></ng-content>
    </d-footer>
  </d-layout>
</d-layout>