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


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;

This hides the sidenav like this

but I think the ask is, to show like this

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.