drawer overlay

It`s possible to make the drawer overlay the content? today when I click in drawer to open menu he shrink the content and when I click to close he expand the content. how can I make the menu overlay the content? and when closed show only icons

tks

It does that automatically in smaller viewports.

I think you can force it to do so on larger viewports by setting this css property:

--vaadin-app-layout-drawer-overlay: true;

1 Like

This hides the sidenav like this
image.png

but I think the ask is, to show like this
image.png

That would require a combination of SideNav and AppLayout features that don’t currently exist.
It’s certainly possible to do a custom implementation for it, but it’s quite a bit of work

There’s a feature request ticket about it though: https://github.com/vaadin/web-components/issues/5823

You can give a :+1: to the topmost comment. We use those to prioritize.

hi, do you know how I can have it overlay the content only, and not the header and footer (navbar) also?

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