Add side navigation component with default styling

[bartaz]

Done

• adds basic version of side navigation
• adds examples and simple docs

Fixes #2860
Fixes #2861

QA

• Pull code
• Run ./run
• Open http://0.0.0.0:8101/ or demo
• Check new side navigation pattern examples, make sure they work correctly
  • default
  • docs
• make sure side nav documentation is added: https://vanilla-framework-canonical-web-and-design-pr-2915.run.demo.haus/docs/patterns/navigation/#side-navigation
  • NOTE: codepen will not render the styles for sidenav, because it uses published version of Vanilla

Screenshots

[webteam-app]

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

[spencerbygraves]

@bartaz we've just had our weekly product design review which produced some interesting feedback (thanks @cristinadresch), which I've just discussed with @lyubomir-popov.

Can we try updating the selected states please, to simplify things a bit:

• Remove the bold and darker style on items you have previously selected (this does feel a bit confusing when looking at the current version)
• Remove the bold style on the currently selected items (this would help to differentiate selected items from the section titles, and bring it in line with tabs)

Now that we can see it in action, we may need to tweak things like this to get it right, hope that's ok.

This shows the difference, on the left is what we have now:

Thanks.

[bartaz]

@spencerbygraves Sure, this will simplify the code as well and remove a need for confusing additional 'selected' state on non active items.

[spencerbygraves]

@bartaz @anthonydillon @lyubomir-popov if you look at the charmhub side nav, you'll see functionality to toggle on/off filters for the main content. Should we add that to the Vanilla side nav at some point?

https://charmhub-io-canonical-web-and-design-pr-5.run.demo.haus/

The side nav here will be updated with the Vanilla one.

[bartaz]

@spencerbygraves Couple of notes on that:

• charmhub seems to be using custom colors of the side nav (and they have it on gray background) - we currently assume white background and use light theme colors, if we want project to be able to change colors only in sidenav component without affecting rest of light theme we need separate variables for that
• side nav is going to have support for right hand icons, this should cover the X case for filters - the easiest way would be to have X always visible (when item is highlighted), having it appear on hover would require a special case

So, I think what we have in plan to implement should be allow for such functionality (with some small compromises). We could later iterate on improvements if needed.

[lyubomir-popov]

Would it be possible to keep the focus outline above the black bar?

[bartaz]

Would it be possible to keep the focus outline above the black bar?

@lyubomir-popov I'll have a look - I just used existing mixins. I'll check if we can control it.

[bartaz]

@lyubomir-popov So it seems currently the only way to display outline above our absolutely positioned border is to hide the border on focus.

I'm personally not sure if it's better - looks a bit like border is "disappearing" rather than getting covered by outline:

But will leave that design decision to you - do we keep current default (dark border over outline) or should we implement workaround and hide border on focus?

[lyubomir-popov]

LGTM!