[Feat]: Add value-slot to SideNavItem to render right-aligned content - such as additional icons

[spdev3000]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

SideNavItem

Description of the requested feature

We'd like to add additional content via "value" slot to sidenav-item (such as Keyboard shortcuts or extra icons) content placed at the end of the SideNav Item like values, keyboard shortcuts, etc. Kind of similar to menu-item.

Mockups or screenshots

Implementation notes or ideas

render "value" slot similar to menu-item

[najikahalsema]

SWC-682
We will need to discuss this with design, as this pattern isn't technically supported in the SideNav spec, but it is in another component, List View. Adding this to the existing sidenav will obviously be easier and faster. We'll keep you posted.

[spdev3000]

As an additional request: Would it be possible to only show this content in slot "value" on hover? The idea is to visualize that the sidenav-item opens a link in a new tab, see screencast: https://github.com/user-attachments/assets/973d4d3f-3e8a-4ae3-8cdf-73d156813b52

Code could look like:

...
 public static get styles(): CSSResultArray {
    return [
      css`
        #item-link {
          flex-direction: var(--mod-sidenav-item-link-flex-direction, row);
          align-items: var(--mod-sidenav-item-link-align-items, center);
        }
        ::slotted([slot='value']) {
          margin-left: auto;
        }
        :host([show-value-on-hover]) ::slotted([slot='value']) {
          display: none;
        }
        :host(:hover[show-value-on-hover]) ::slotted([slot='value']) {
          display: block;
        }
      `,
    ]
  }

  @property({ type: Boolean, reflect: true, attribute: 'show-value-on-hover' })
  showValueOnHover = false

  protected override render(): TemplateResult {
    return html`
      <a
        href=${this.href || '#'}
        target=${ifDefined(this.target)}
        download=${ifDefined(this.download)}
        rel=${ifDefined(this.rel)}
        data-level="${this.depth}"
        @click="${this.handleClick}"
        id="item-link"
        aria-current=${ifDefined(this.selected && this.href ? 'page' : undefined)}
        aria-expanded=${ifDefined(this.hasChildren ? this.expanded : undefined)}
        aria-controls=${ifDefined(this.hasChildren && this.expanded ? 'list' : undefined)}
      >
        <slot name="icon"></slot>
        <span id="link-text">
          ${this.label}
          <slot></slot>
        </span>
        <slot name="value"></slot>
      </a>
      ${this.expanded
        ? html`
            <div id="list" aria-labelledby="item-link" role="list">
              <slot name="descendant"></slot>
            </div>
          `
        : nothing}
    `
  }
...