Refine the visual design, interaction, and accessibility of the global navigation

[ryanahamilton]

Refines the visual presentation of the global navigation

While some of the changes in this PR have a subjective nature to them, I believe the sum makes for an objectively better user experience.

• Reduced the overall width of the nav bar from 80px to 64px wide. Airflow has many horizontally dense views and the current nav was using an unnecessarily large amount of it.
• Improved the continuity and visual cadence of the navigation items. These changes make the presentation look more intentional:
  • The Airflow logo previously had different x and y margins surrounding it, making it appear smashed to the top of the bar.
  • The nav items previously had slightly different x and y paddings, making them rectangles. Now they are squares
• Tightened the location of the Docs and User nav items closer to the bottom to make them appear pinned (which they are) instead of floating.
• Tweaked the hover, focus, and active interaction states to be more polished.

Dark mode - Before	Dark mode - After	Light mode - Before	Light mode - After

Docs menu - Before	Docs menu - After

User menu - Before	User menu - After

Improves nav item accessibility

Observe how each nav item was receiving focus twice each time I pressed tab on my keyboard:

Nav item tabbing - Before	Nav item tabbing - After

This was due to undesirable markup nesting with anchors wrapping buttons. This was resolved so that each nav item is only an anchor or only button (where appropriate), utilizing Chakra's asChild prop to accomplish this aswell as some additional refactoring of the NavButton component.

Nav item markup - Before	Nav item markup - After

Testing

Added proper overflow handling and title tags for languages that might have overly long labels on them:

I confirmed no regressions with RTL languages:

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[potiuk]

Nice

[bbovenzi]

Love it!

[kaxil]

Love it ❤️

[guan404ming]

Looks really great!

[vatsrahul1001]

This looks great. Love it

[phanikumv]

Looks great!

[sunank200]

Amazing

[pierrejeambrun]

LGTM, thanks!

[amoghrajesh]

Looks nice!

[github-actions]

Backport successfully created: v3-1-test

Status	Branch	Result
✅	v3-1-test

[jscheffl]

Very cool... just one minor nit: As you had the example of german translation above with overflowing label... this is now hard to read. Could we use at least a line break to have a text in two lines? Or is it always cropping first line?

@TJaniF might we need / shall we adjust German translation for the change? WDYT
Also might affect other languages...

[ryanahamilton]

Could we use at least a line break to have a text in two lines? Or is it always cropping first line?

@jscheffl It's intentionally always cropping to a single line. This is how we can enforce a consistent presentation across the navigation items, regardless of what value is entered in the translation file. Given there are only a handful of these nav items and they are persistently visible in the application, the icons really act as the primary identifiers since people can process symbols quicker than words and the labels are secondary.

FWIW, In your example, the label is Datensets (Assets), which is combining 2 languages. I would argue that it should only be Datensets, which in turn removes the truncation for this language: