Vaadin Sidenav How to Override Transition

General
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