Top navigation using grid row

[bartaz]

Component/pattern to amend

Top navigation

Context

In new designs the top navigation is being recreated using regular grid with col-3 for logo part, and col-9 for items, to keep the 25/75 split similar to the rest of the page. If applied currently this requires some changes to HTML structure and utilities like u-no-padding--left on logo, etc, to be properly aligned.

This results with projects not being consistent between each other, applying some custom styling to accomodate, etc.

We need to officially build this in Vanilla, provide examples, that would allow using this way of building top nav without local hacks.

Examples:

https://microk8s.io/ (with u-no-padding--left and inline style of "margin: -0.75rem")
Juju docs update: canonical/juju.is#510

[danielmutis]

@lyubomir-popov to provide definition of how this should work with the grid in order to make it official in Vanilla.