Side navigation status labels and icons

[bartaz]

Done

Add right side status icons/labels to side navigation.

Part of #2862

QA

• ./run or demo
• Check if labels and icons are displayed correctly on different levels of navigation

Screenshots

[webteam-app]

Starting demo at: https://vanilla-framework-canonical-web-and-design-pr-2928.run.demo.haus/

[lyubomir-popov]

@bartaz I think the margin-right on the icon should be 2x bigger. This is so make it consistent with rules we're creating for icons elsewhere: .5rem offset between icon and the text it belongs to, 1rem between icon and unrelated text.

[lyubomir-popov]

@bartaz We already have an example for truncation in the utilities section, but wondering if it would be helpful to have one here as well. The gotcha there is, the truncated text needs to be wrapped in a span with class"u-truncate", rather than adding that class on the <li>. Only if you think it is a good idea, not insisting.

[bartaz]

@lyubomir-popov

I updated the spacing on the right of icons.

As for truncating - I have a separate task #2865 to make sure we have all cases in examples, so will make sure I add it there.

[lyubomir-popov]

LGTM, just tiny var rename.