Drawer is overlapping appbar

[Juan]

I want the drawer to respect the appbar height but i keeps covering all.

<kendo-appbar [position]="'top'">
  <kendo-appbar-section>
    <button kendoButton [look]="'clear'">
      <kendo-icon [name]="'menu'"></kendo-icon>
    </button>
  </kendo-appbar-section>
  <kendo-appbar-section>
    <h1 class="appbar-title">{{ title }}</h1>
  </kendo-appbar-section>
  <kendo-appbar-spacer></kendo-appbar-spacer>
</kendo-appbar>

<kendo-drawer-container>
  <kendo-drawer #menuDrawer [mode]="menuDrawerMode" [expanded]="menuDrawerExpanded">
    <ng-template kendoDrawerHeaderTemplate >
      <div kendoRippleContainer>
        <button kendoButton [look]="'flat'" style="display: block; width: 100%;">
          <kendo-icon [name]="'arrow-left'" [size]="'medium'"></kendo-icon>
        </button>
      </div>
    </ng-template>
  </kendo-drawer>
  <kendo-drawer-content>
    <router-outlet></router-outlet>
  </kendo-drawer-content>
</kendo-drawer-container>

[Martin Bechev]

Hello Juan,

Thank you for the provided code snippet.

I implemented a StackBlitz example with an AppBar component at the top and then a Drawer, but the dimensions of the components seem to be respected:

https://stackblitz.com/edit/angular-rb6erj

Please check it and let me know if I am missing something.

Regards,
Martin
Progress Telerik