Grouped Kibana nav

[myasonik]

Building on top of #29222 and elastic/dev#1329, it's time to get going on the grouped nav!

Grouping

• [Recently viewed]
• [Analyze]
  • Discover
  • Visualize
  • Dashboard
  • Canvas
  • Maps
  • Machine learning
  • Graph
  • Timelion
• [Observability]
  • Logs
  • Metrics
  • APM
  • Uptime
• [Security]
  • [SIEM]
• [Management]
  • Stack management
  • Stack monitoring
  • Add data
  • Dev tools

Implementation details

• Disable grouping for the whole nav when:
  • Using the open source license
  • There are less than 6 total available applications
• Disable grouping for the group when there is only 1 sub-application
  • Show the group name (e.g., Security) and link directly to the single application (e.g., SIEM)
• Advanced setting to turn off grouping

Prototype

Blockers

• Nav drawer a11y problems eui#2252

Stretch goals

• Remove dead code Clean up unused navigation code for localStorage #44389
• Skip links (Accessibility) Skip links to main content #38980
• aria-current support (Accessibility) SPA routing #42379
• Cleanup the directory and home page groupings to match the new ones

[elasticmachine]

Pinging @elastic/kibana-design (Team:Design)

[lizozom]

This looks great @myasonik !
Some feedback -

• ATM There is no indication to which items open another sub-menu and which don't. When exploring the menu, I thought clicking on items always opens a sub menu. But then I was surprised by siem navigating me to the new app (which takes some time!). I feel like having the submenu open automatically when staying on the button for more than a second (?) can help with this.

• This would also decrease the number of clicks per navigation (ATM it became two for most apps). If sub menus open on hover, this would bring it back to 1.

• Can custom plugins control their place in the side navigation and add themselves into a sub menu? Is there documentation for it?

[myasonik]

@lizozom

Your first two items about nav UI and design we're largely just ok with. There'll be a learning curve for the new nav, but it should be a one time cost and should smooth out over time as people become comfortable with it. (We might rethink some of these over time if people continue to have issues but there's a larger 8.0 nav rework planned anyways so this likely isn't a forever phase for the UI.)

And I've added some docs but if you have suggestions on where to put more docs (or what other docs to add) I'd be happy to do it! You can see them all by filtering to .md files in the PR. The short of it is:

• When setting up a nav link, plugins can define their own category if they want. category can take an order which is sorted on when building the nav.
• Prior to my work, nav links already took an order property as well which is sorted on to set the actual link order which is still used, just within their category sub-navs.