feat(core/menu): rework of menu

[danielleroux]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (yarn build) was run locally and any changes were pushed
• Unit tests (yarn test) were run locally and passed
• Visual Regression Tests (yarn visual-regression) were run locally and passed
• Linting (npm lint) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bug fix
• Feature
• Refactoring (no functional changes, no API changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the new behavior?

ix-menu

Item dropdown overflow is removed

We replaced the overflow menu with second level navigation in form of categories

<ix-menu-category label="AI Configuration" icon="rocket">
  <ix-menu-item>Nested Item 1</ix-menu-item>
  <ix-menu-item>Nested Item 2</ix-menu-item>
</ix-menu-category>

If the menu stills overflow the bottom of the menu a scroll container will be displayed.

Multiple screen layouts

The ix-basic-navigation in combination of the ix-menu comes with 3 layout formats:

const smallMediaQuery = `only screen and (max-width: 480px)`;
const mediumMediaQuery = `only screen and (min-width: 480px) and (max-width: 1024px)`;
const largeMediaQuery = `only screen and (min-width: 1024px)`;

You can force the old behavior by setting the supportedModes to ['small', 'medium'] e.g

<ix-menu supportedModes={['small', 'medium']}>

ix-menu-about and ix-menu-settings

Event changed from CustomEvent<PointerEvent> to CustomEvent<{ nativeEvent: MouseEvent, name: string }}>

Does this introduce a breaking change?

• Yes
• No

[nuke-ellington]

Migration guide recommendations

[nuke-ellington]

1 minor change then I will accept LOL

[nuke-ellington]

lgtm