Update Navbar with options for logo widths and max width for mobile

[slowbot]

Logo Width Proposal:

• Add multiple width options using logo-slim, logo-med and logo-wide variants

Set Logo Max Width:

• Add a max width to logo on mobile to avoid collision with menu button

Allow for Image only option:

• Add a variant that hides text and displays logo only. Should still accept logo title but only accessible to screen readers

[akegan]

Thanks Jesse! I'd just add that we'd ideally be able to set this or default from the SiteHeader component. We're using that directly rather than pulling in a Navbar component directly.

I was able to get better behavior by calling SiteHeader with logoClass="normal", but even with that class, there's still an issue with overlap on small screens. It starts to become a problem around 370px

More context overall in this slack thread

[akegan]

@slowbot I wonder if it'd also make sense to expand this ticket to allow for the functionality of just having a logo lockup image with the text instead of providing the text separately?

It currently looks like this if you leave out the text.