How to change drawer width of Vaadin App Layout-CodePudding

In Vaadin 23, how to increase or decrease the width of the drawer area of a Vaadin

CodePudding user response：

In your global style sheet, for example frontend/themes/mytheme/styles.css (this assumes you have a custom theme annotation defined @Theme("mytheme")), add the following:

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

This is slightly simpler than the solution that Tarek suggested (which also works just fine).

CodePudding user response：

You will need to style the internals of the app-layout component.

If the project is using the custom-theme mechanism, then create a file called vaadin-app-layout.css under the directory frontend/themes/<Your-Theme-Name>/components. In that file, you can, say, increase the width of the AppLayout drawer like so:

:host {
    --vaadin-app-layout-drawer-offset-size: 400px;
}

[part="drawer"] {
    width: var(--vaadin-app-layout-drawer-offset-size);
}

NOTE: if you are not using the custom-theme mechanism, then you will need to add the aforementioned styling in a CSS file that is imported using the @CssImport annotation. For example, you can create a file called vaadin-app-layout.css under the project frontend directory, and then import it from java using the following annotation:

@CssImport(value = "vaadin-app-layout.css", themeFor = "vaadin-app-layout")