Skip to content

Conversation

vursen
Copy link
Contributor

@vursen vursen commented Oct 10, 2025

Description

This PR adds the has-drawer and has-navbar attributes to app-layout which are set automatically when their corresponding slots are present. As a result, this eliminates the need to use the :has selector in Aura, which noticeably improves page rendering performance:

Before After
Screenshot 2025-10-10 at 17 55 23 Screenshot 2025-10-10 at 17 55 15

(measurements are taken on aura.html with 4x CPU throttle)

Type of change

  • Feature

@vursen vursen requested review from jouni, sissbruecker and web-padawan and removed request for sissbruecker October 10, 2025 14:00
:is(vaadin-app-layout[drawer-opened], vaadin-app-layout:has([slot='navbar'] vaadin-drawer-toggle))
:is(.aura-view > header, .aura-view-header)
vaadin-drawer-toggle:not([theme~='permanent']),
vaadin-app-layout:is([drawer-opened], [has-navbar]) vaadin-drawer-toggle:not([theme~='permanent']),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This new selector doesn't cover the previous case. The second part of the first :is() selector checks if app layout has a drawer toggle within the navbar, and only then hides the drawer toggle in the view header. Now the drawer toggle in the view header is always hidden when there's a navbar, even without a drawer toggle.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. It should be fixed now.

Copy link

@vursen vursen merged commit 397e219 into main Oct 13, 2025
9 checks passed
@vursen vursen deleted the add-has-navbar-and-has-drawer branch October 13, 2025 10:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants