[app-layout] Add CSS custom property to customize drawer width

[moderndeveloperllc]

Right now the drawer width is fixed at 16em. For those of us with small tab names, it can create a bit too much blank space. It would be nice to be able to set that as a CSS variable. It looks like the main area is already being offset from the drawer programmatically.

[DiegoCardoso]

That sounds a good enhancement for the component. Thanks!

[jouni]

Yeah, would be straightforward to expose a new custom property and use that for setting the other offset property.

[brianreeve]

I agree with OP that it would be nice to have styling control over the drawer width. However, you can achieve a lot of style control by following the pattern Vaadin uses to ship components with both lumo and material themes.

First, create a my-app-layout directory with the following files:

my-app-layout-styles.js

For a quick and dirty solution, you can copy the contents of a theme file (I copied node_modules/@vaadin/vaadin-app-layout/theme/lumo/vaadin-app-layout-styles.js) and make the necessary modifications.

I heavily modified the app layout theme file for my app, but to set the drawer width (and background), I have:

      [part="drawer"],
      :host([overlay]) [part="drawer"]::before {
        background: var(--my-bg-1-color);
        width: 312px;
      }

You could also probably just use a CSS var instead of a fixed value, but I hadn't tried it since this was used just for a proof of concept.

app-layout.js

Import the theme file you just created and the app layout module.

import './my-app-layout-styles.js';
import '../../node_modules/@vaadin/vaadin-app-layout/src/vaadin-app-layout.js';

Then, just import in your app the my-app-layout/app-layout.js you just created instead of one in node_modules.

[somerandomam]

Easy solution for change drawer width:
Create some css frontend/styles/my-app-layout-styles.css with
[part="drawer"] { width: 8em !important; }

add css import
@CssImport(value = "./styles/my-app-layout-styles.css", themeFor = "vaadin-app-layout")

[anezthes]

Shouldn't [part="drawer"] be using var(--_vaadin-app-layout-drawer-offset-size) as its width?

[jouni]

@anezthes, well, not really. The value of that custom property is set during the rendering and is measured from the actual width of the drawer. You could set the width of the drawer to auto, and let it be sized by its contents, and the custom property would match that width.

[rolfsmeds]

Proposed name: --vaadin-app-layout-drawer-width

[francoRolandoQubika]

There is a way to update the size of the drawer and the offset dynamically?

[rolfsmeds]

Depends on what you mean by "dynamically".

You can change the value of --vaadin-app-layout-drawer-width at any time and that will affect the drawer in real-time.

Unfortunately you can't make the drawer's width scale automatically to fit its contents.