Associate the Arrows with Navigational Groups

[pablohoneyhoney]

The arrow should be closer to the navigational instance it’s associated to. Currently they are at an uncanny distance that creates a scattered visual effect, but also doesn't make the taxonomies clear.

[jasmussen]

I would agree! It looks separate at this point. Something like this, maybe?

In this mockup, I also moved the arrow slightly downwards to optically balance with the text.

[ryelle]

We talked about this a little in #263 & #261 — the arrows need to have enough space to be touch targets (illustrated here with the focus state).

The right side of the text already has a less spacing than the left, so I don't think we can shift that any more.

@javierarce walked through a few ideas in this comment, but ultimately we landed on what you see now.

[ryelle]

Maybe there could be more space between the menu items to make it clear the text + chevron are a unit?

[jasmussen]

We can address the left padding of the chevron button so it's closer to the title, and add a negative right-margin if need be, to compensate for the increased visual spacing between items.

[javierarce]

I think that if we reduced the left padding of the arrows to 4px we could achieve what we designed:

The focused states will look unbalanced, but I think it's OK.

PS: Something we should also tweak is the vertical position of the arrows.

[javierarce]

Thanks for the fix! I created a new issue for the vertical position of the chevrons.