How to overlay content, but not header and footer (by drawer)

Flow
4

In your second screenshot, it looks like you’ve disabled the overlay mode completely, which indeed causes the content area to shrink when the drawer is visible.

Instead, you move the drawer higher in the stacking order, with z-index:

vaadin-app-layout::part(navbar) {
  z-index: 3;
}

And to prevent the header content from overlapping the content in the drawer, you can inset the drawer with the height of the navbar:

vaadin-app-layout::part(drawer) {
  top: var(--_vaadin-app-layout-navbar-offset-size);
}