Percy examples combination - `patterns/side-navigation`

[jmuzina]

Combined patterns/side-navigation examples.

Deletes theme-specific side-navigation examples.

Interactivity is disabled for the combined view, as the script for this component was not written in such a way that it can be combined / imported multiple times yet.

QA

• Review combined side navigation example
  • Note that there is a 33-33-33 layout of three side-nav drawers where the middle one will be completely white in dark theme - this is expected as this example has a hardcoded white background, and setting dark theme turns the text to white.
  • Verify redirects
    • https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/accordion-dark -> https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/accordion?theme=dark
  • https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/dark -> https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/default?theme=dark
  • https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/expandable-dark -> https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/expandable?theme=dark
  • https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/paper -> https://vanilla-framework-5170.demos.haus/docs/examples/patterns/side-navigation/default?theme=paper

[webteam-app]

Demo

Jenkins

demos.haus

[pastelcyborg]

Similarly to the navigation PR, I'll defer to @bartaz since I may not have all the context to fully sign off on this.

[bartaz]

Something is broken in this one. It may have some hardcoded dark background originally?

[jmuzina]

@bartaz

Something is broken in this one. It may have some hardcoded dark background originally?

This also happens on production when you view this example in light theme.

It comes from _layout-JAAS which is trying to use jinja variables to set the icon color. However color theme changer works in JS, not jinja

[bartaz]

Oh, OK. So, these conditionals {% if is_dark %}is-light{% endif %} on icons are not needed anymore, as they should be themed automatically without any need for class name right now:

https://github.com/canonical/vanilla-framework/blob/3efcf83eedff4fee69e7be25d111413353fa72e3/templates/docs/examples/patterns/side-navigation/_layout-JAAS.html#L13C32-L13C67

[jmuzina]

Oh, OK. So, these conditionals {% if is_dark %}is-light{% endif %} on icons are not needed anymore, as they should be themed automatically without any need for class name right now:

https://github.com/canonical/vanilla-framework/blob/3efcf83eedff4fee69e7be25d111413353fa72e3/templates/docs/examples/patterns/side-navigation/_layout-JAAS.html#L13C32-L13C67

@bartaz Removed those conditionals & also rebased to remove merge conflicts!

[jmuzina]

Blocked pending merge of #5165

[jmuzina]

5165 has been merged; script include if checks were replaced with script blocks