how can i change the app layout “touchOptimized” trigger width

hi,

i want the app layout to be in mobile when the window width less than 1440px. the current trigger width is about less than 800px.

how to configuration?

I think I’ve answered this in more details at some point, but can’t find it right now.

In short, you can set the --vaadin-app-layout-drawer-overlay CSS custom property to either true or false within media queries. The default query is the following:

@media (max-width: 800px), (max-height: 600px) {
  :host {
    --vaadin-app-layout-drawer-overlay: true;
  }

  [part="drawer"]
 {
    width: 20em;
  }
}

Here’s what you can do in a custom component style sheet:

@media (max-width: 1440px) {
  :host {
    --vaadin-app-layout-drawer-overlay: true;
  }
}

Read the docs how to import component style sheets: https://vaadin.com/docs/v14/themes/importing-style-sheets.html#component-styles

it works, thanks.