feat: [M3-7366] - Improved Primary Navigation UX

[jaalah-akamai]

Description 📝

Overall improvements to primary nav, which includes changes to accommodate longer Cloud Manager feature names.

Changes 🔄

• Increased nav width to 232px
• Added transition to nav links and adjusted logo transition to match
• Tightened spacing around logos, links, and beta chip according to mocks
• Reduced link font size to .875rem/14px

Screenshot

Before	After

How to test 🧪

• Checkout branch or preview link
• Verify that opening / closing menu works as intended
• Verify that changing breakpoints works as intended
• Verify changes in different browsers

[github-actions]

Coverage Report: ✅
Base Coverage: 81.69%
Current Coverage: 81.7%

[abailly-akamai]

@jaalah-akamai heads up i rebased the PR

I think we still need to handle the vertical centering of both the logo and the managed menu item?

[jaalah-akamai]

Managed	Default

[bnussman-akamai]

Nice! Looks slightly better imo!

I do feel like the green accent colors need to go 🗑️ Is this something we'd consider doing now?

For example, blue looks slightly more appealing to me

[abailly-akamai]

@bnussman-akamai that's a great suggestion - let's go blue! @jaalah-akamai?

[mjac0bs]

@bnussman-akamai that's a great suggestion - let's go blue! @jaalah-akamai?

As an alum, I couldn't resist this one opportunity. 😆

[jaalah-akamai]

@bnussman-akamai @abailly-akamai @mjac0bs UX wants to hold on the color change especially since we'll be introducing design tokens soon and the colors will shift slightly. It's on our radar though!

[jaalah-akamai]

This is good to go otherwise

[mjac0bs]

This looks great on Chrome, Safari, and Firefox at various breakpoints. 🚀

The only thought I had (and perhaps only because I was sitting there clicking this button repeatedly), is that the fade out of the text feels a little slow when collapsing the menu.

Screen.Recording.2024-03-27.at.9.29.04.AM.mov

[mjac0bs]

Suggested change

	Improved Primary Navigation UX ([#10137](https://github.com/linode/manager/pull/10137))
	Improve Primary Navigation UX ([#10137](https://github.com/linode/manager/pull/10137))

Nit: present tense

[hana-linode]

I feel like the divider spacing between the logo and the items are a bit cramped in comparison to the other dividers in the nav. Can we increase the spacing? LGTM otherwise!

[jaalah-akamai]

I feel like the divider spacing between the logo and the items are a bit cramped in comparison to the other dividers in the nav. Can we increase the spacing? LGTM otherwise!

That's by design so that the border lines up with the top menu