Polaris-react: Main navigation is unresponsive and unclear

[johanstromqvist]

The design of the main navigation was crammed into a too tight schedule and never got the attention it deserves. Meanwhile, it's fair to assume that it's one of the components that merchants interact with the most. It's the face of admin –it _needs_ to be world class.

Analysis:

• The dynamics of hover, pressed, and active states + the active indicator are not clear or connected enough and create a scattered experience
• Parent without children, parents with children, and child items all look different when active which makes it hard to set expectations
• Navigating between two parent items causing one or two sub menus to open/close creates a sudden and unexpected layout change
• Cursor flashes between pointer and default when hovering over last child and the parent below it.

Fix:

• Dedicated design effort

[federicobadini]

The vertical alignment of navigation item badges is wrong too. The badge should be vertically centered

Here is a simple code sample showing the problem: https://codesandbox.io/s/shopify-polaris-navigation-badge-vertical-alignment-bug-hdx8c