[Security Solution] MVP for the new Security side navigation

[semd]

Summary

Design: https://www.figma.com/file/5nmBlNVjUNFgsprHkZ8nzg/Navigation
Specs Document: https://docs.google.com/document/d/1_uGeDa_J1cJo0UBfmgnfeqv6e3GCFeb8XnsET2EofCE/edit?usp=sharing

Implement the new navigation design for Security Solution:

Specifications

It will be added under a feature flag (enabled by default) and an advanced settings toggle (disabled by default).

The main navigation items:

• Items must always have a URL
• Items can have "active" and "hover" states:
  • "active" -> primary color background + primary color text + bold
  • "focus" -> primary color background + default text
• Items may or may not have sub navigations items:

Main nav items without sub nav:

• It must have a text link to navigate to the nav item URL
• It must not have a sub-menu toggle button
• It must have "active" state when the item URL matches the current page URL
• It must have "focus" state when it is focused or hovered

Main nav items with sub nav items:

• It must have a icon button on the right side to toggle the sub-menu panel
• It must have "active" state when its item URL or any sub-item URL matches the current page URL
• It must have "focus" state when it is focused or hovered
• It must have "focus" state when its secondary navigation menu is open

Sub-menu panel

• It must show a link label and a description (not clickable) for each item.
• It must navigate to the link URL and close the sub-menu when any link is clicked.
• It must show a scroll bar if content overflows vertically
• When the sub-menu is open:
  • It must close on outside click
  • It must close when the same main nav toggle button is clicked
  • It must change content when other main nav toggle button is clicked
• When the sub-menu is closed:
  • It must open when any toggle icon button is clicked

Steps:

1. Implement prototype [Prototype] Security nav next-eui-starter#61
2. Integrate the new implementation within Kibana and Security plugin, wire all props.

We will also refactor the link config files, to create a single source of truth in Security plugin, to make it easier to add/remove/update pages.

The landing pages for all grouped sections will be implemented in: #130565

PRs:

• [Security Solution] Nav unified #131157
• [Security] New side navigation #131437
• Update navigation landing pages to use appLinks config #132027
• Solution nav add flex column styles #132252
• Create Manage landing page #131245
• [Security Solution] New Side nav integrating links config  #132210
• Nav unified show timeline #131811
• [Security Solutions] Refactor breadcrumbs to support new menu structure #131624

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)