AppLayout

Hi people, I’m using App Layout and I would like to know if it’s possible to change the width of drawer and navbar?

Yes. For example:

vaadin-app-layout::part(drawer) {
  width: 300px;
}

vaadin-app-layout::part(navbar) {
  height: 80px;
}

Thx @resilient-meerkat

@resilient-meerkat is it possible to disable responsive behavior of AppLayout? I want to disable menu to jump from left sidebar to bottom in lower viewport sizes

What would you rather have? That the sidebar/drawer is always visible, no matter how narrow the viewport?

Exactly. My custom css rules will style it accordingly (remove big icons etc.)

I assume you are using the default Lumo theme?

Actually, that shouldn’t even matter.

Try this:

vaadin-app-layout {
  --vaadin-app-layout-drawer-overlay: false;
}

That should be enough to prevent the drawer from changing to the “overlay” mode.