Vaadin Sidenav How to Override Transition

General
1

I want to put transition to my Sidenav using Styles.css but its not working, how or in what way can I put a transition to my Sidenav everytime I expand and close it.

2

Here’s how I did it in the StarPass demo. You need to override one style in the shadow DOM of the component, though.

Place this in frontend/themes/[my-theme]/components/vaadin-side-nav-item.css

[part="children"] {
  /* This is "display: none !important" in shadow DOM when children are collapsed/hidden, which we want to override (to be able to transition the opening/closing of children) */
  display: flex !important;
}

Place this in frontend/themes/[my-theme]/styles.css (or some other stylesheet you import from there):

vaadin-side-nav,
vaadin-side-nav-item {
  display: grid;
  grid-template-rows: min-content 1fr;
  --transition-duration: 260ms;
  transition: grid-template-rows var(--transition-duration);
}

vaadin-side-nav[collapsed],
vaadin-side-nav-item:not([expanded]) {
  grid-template-rows: min-content 0fr;
}

vaadin-side-nav::part(children),
vaadin-side-nav-item::part(children) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: visibility var(--transition-duration), opacity var(--transition-duration);
}

vaadin-side-nav[collapsed]::part(children),
vaadin-side-nav-item:not([expanded])::part(children) {
  visibility: hidden;
  opacity: 0;
}
3 Likes
3

thank you sir for this very helpful information sir…

4

@Jouni1 looks like a really good candidate for a build-in variant :)

1 Like
5

@knoobie, I’m trying to get this to work automatically in Aura, not even a variant, just animate every time (unless the user prefers reduced motion). Might even be part of base styles, but so far I’ve opted to not include much animations there.

2 Likes