Support SideNav of 24.1

[mrgreywater]

Currently the new SideNav introduced in 24.1 doesn't appear to be styled. It would be nice if this design could be achieved: https://design.gs.com/components/side-panel-menu

[mrgreywater]

Here is the style I've settled with for now to resemble the Goldman Sachs style:

vaadin-side-nav {
    --vaadin-side-nav-child-indent: calc(var(--lumo-icon-size) + var(--lumo-space-m));
}

vaadin-side-nav-item:not([slot='children']) {
    border-left: 0.16rem solid transparent;
}

vaadin-side-nav-item:has(vaadin-side-nav-item[active]) {
    border-left: 0.16rem solid var(--lumo-primary-color);
}

vaadin-side-nav-item[active]:not([slot='children']):not(:has(vaadin-side-nav-item)) {
    border-left: 0.16rem solid var(--lumo-primary-color);
}

vaadin-side-nav-item[expanded]:has(vaadin-side-nav-item) {
    background-color: var(--lumo-contrast-5pct);
    --side-nav-select-color: var(--lumo-contrast-10pct);
}

vaadin-side-nav-item[active] {
    --side-nav-select-color: var(--lumo-primary-color-30pct);
}

vaadin-side-nav-item::part(item):hover {
    background-color: var(--side-nav-select-color, var(--lumo-contrast-5pct));
}

vaadin-side-nav-item:has(vaadin-side-nav-item[active])::part(item) {
    color: var(--lumo-primary-color);
}

vaadin-side-nav-item vaadin-icon {
    color: unset;
}

vaadin-side-nav-item > vaadin-side-nav-item > [slot="prefix"] {
    display: none;
}

vaadin-side-nav-item::part(item) {
    color: var(--lumo-body-text-color);
    padding: var(--lumo-space-m);
    padding-left: var(--lumo-space-l);
    gap: var(--lumo-space-m);
    padding-inline-start: calc(var(--lumo-space-l) + var(--_child-indent, 0px));
}