navigationBar refactor tracking issue

[luixxiul]

Describe the issue you encountered: Refactor navigationBar.less with Aphrodite (tracking ticket).

navigationBar.less is obviously one of the most largest LESS files after forms.less has been almost refactored.

So I would like to propose that we should work on that file step by step, splitting the tasks, confirming each of them works nicely, rather than refactoring everything with one commit and PR.

• Extra QA steps:
  1.
  2.
  3.

• Any related issues:

[luixxiul]

I created a branch navigationBar-aphrodite for tasks. I'm going to split commits as clear and small as possible.

[cezaraugusto]

adding perf too as it can benefit several perf bottlenecks (more below).

Re-assigning @luixxiul, co-assigning me. @bsclifton and @NejcZdovc feel free to join too but will eventually be tagged for reviews. This is important for the following reasons:

With this we can:

• improve performance removing several unused styles (this can be audited going to devtools->more tools->coverage). With Aphrodite styles are bound to the component so only rendered as needed;
• With less styles, less work for the browser parser, less reflows/repaints, better perf. Recalling CSS is render blocking and the render tree is not built without full parse;
• Without bloated styles, ease the task of making a critical rendering path for faster app start-up;
• Better future unit testing with component split;
• better DX with each component being split;
• Big win for Aphrodite task, being this our biggest component.

Plus:

• allow dark mode;
• free the road to add future user-theming;

I'm changing the description to navigationBar refactor tracking issue. This also has no milestone but ideally all in 0.21.x to avoid regressions.

Recalling that most of this work was already done by @luixxiul's prior work in #9851. This is just a matter of coordinating the best takes and applying as needed.

[luixxiul]

I'm happy as long as proposed changes from me are attributed some way.

This time I'll audit if styles are successfully converted, creating no visual regressions.