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

Flow
1

I had a problem that with UX that I felt a close button should be there on a drawer, then I found I could just stop the drawer overlaying the header, and therefore keep the button available, but now the drawer “pushes” the content, and it wraps it self awkwardly.
so could someone help me in understanding how to make the drawer overlay the content but not the header (preferably also not the footer, but not a massive need)

Screenshot from 2025-01-11 11-27-07
Screenshot from 2025-01-11 11-27-07419×898 77 KB

as you can see the text here is messed up

Screenshot from 2025-01-11 11-27-14
Screenshot from 2025-01-11 11-27-14419×898 58 KB

and if I allow overlay, I don’t have the close button of the drawer

Screenshot from 2025-01-11 11-31-19
Screenshot from 2025-01-11 11-31-19419×898 59.3 KB

I understand you can still close the drawer by clicking outside or on any of the links, but is there a way to place a close button inside, or allow the header to not be overlayed?

Thank you

2

Did you consider just adding a DrawerToggle component?

3

You mean to the drawer? I tried but wasnt able to. So i opted for having the header over the drawer

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);
}
5

Yes! It works! Thank you very much

I had disabled it on purpose in the second SC, sort of to show what I wanted it overlay for the content, but not the header and “footer”

Thank you for your solution, and I also added this:
bottom: var(–_vaadin-app-layout-navbar-offset-size);
since on smaller screens the navbar at the bottom also overlays part of it

vaadin-app-layout::part(navbar) {
z-index: 3;
}
vaadin-app-layout::part(drawer) {
top: var(–_vaadin-app-layout-navbar-offset-size);
bottom: var(–_vaadin-app-layout-navbar-offset-size);
}

could I ask you though, where can I find the “original” css of the components, if I wanted to check them out, rather than override them?

6

where can I find the “original” css of the components, if I wanted to check them out

Component source codes are here: web-components/packages at main · vaadin/web-components · GitHub

For each component, there might be multiple places where styles are coming from. For all components, they at least have their “core styles”, which are in the files under the src folder. Then they have the theme styles, which are under the theme/lumo and theme/material folders. In addition, some styles could come from the vaadin-lumo-styles package (or the vaadin-material-styles package), or some other component package. For example, input field components get styles from the input-container and field-base packages.

rather than override them?

Not sure I understand this. Even though you can see the “original” CSS of the components, you still need to override them if you want to change them. You can’t edit the source files directly.