Nested vertical nav

[gabbsmo]

Is your feature request related to a problem? Please describe. The vertical nav widget looks great but does not allow for nested lists.

Describe the solution you'd like If hoo-nav-listsub are nested they should be indented, like they are in Fluent React.

Describe alternatives you've considered Tried doing this with DevTools in Pattern Lab but did not succeed. It is of course also possible that I did it wrong there is just a missing example and not something missing in the framework.

[gabbsmo]

This is the workaround I am currently using:

/* Set padding on navitem-text rather than link, avoids issues with button before link */
.hoo-navitem[aria-current] .hoo-navitem-link {
    padding-left: 0;
}

.hoo-nav-listsub .hoo-navitem-text {
    padding-left: 1.6875rem;
}

.hoo-nav-listsub .hoo-nav-listsub .hoo-navitem-text {
    padding-left: 2.5625rem;
}

/* Do not rotate all icon below expanded */
.hoo-navitem[aria-expanded=true] .hoo-buttonicon svg {
    transform: inherit;
}

/* Rotate nearest icon, more selectors needed to support deeper trees */
.hoo-navitem[aria-expanded=true] > .hoo-navitem-text > .hoo-buttonicon svg,
.hoo-navitem[aria-expanded=true] > * > .hoo-navitem-text > .hoo-buttonicon svg /* Allow for nav item content as custom element */ {
    transform: rotate(90deg);
}

/* Set border on navitem-text, rather than li, avoids children also getting the background, if the parent is a link to a page */
.hoo-navitem-text[aria-current=page] {
    background-color: var(--buttonBackgroundCheckedHovered);
    border-left: 2px var(--ButtonPressedBorder) solid;
}

    .hoo-navitem-text[aria-current=page] > .hoo-navitem-link {
        margin-left: -2px;
    }

[StfBauer]

Made an update to support 5 levels of nesting.

[StfBauer]

🛳️ Shipped in 2.5.0 - https://lab.n8d.studio/htwoo/changelog/htwoo-core-cl/