Implement: Integrate more list into nav bar

[larsrickert]

Why?

We want to integrate the existing OnyxMoreList component in the nav bar so that a "more" nav item is shown if not all nav items fit into the available width so the user can still access all nav items.

Open questions / TODOs

No response

Depends on

• Implement unified and nestable OnyxNavItem #2171

Design

Same as OnyxNavButton

Acceptance criteria

• if not all nav items fit into the available width, remaining items should be grouped in a e.g. " +3more" nav item that shows the remaining nav items
• if hidden elements contain children, they should still be shown in the more indicator
• custom nav item content (.e.g badges) are still visible in the more indicator
• mobileBreakpoint property of the OnyxNavBar is deleted since its no longer needed

Implementation details

No response

Reference implementations

No response

Applicable ARIA Pattern

No response

Definition of Done

• The following component requirements are implemented:

  • skeleton
  • density
  • example usage added to apps/demo-app/src/views/HomeView.vue

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma

Approval

• Storybook
• Documentation
• Checked and approved by designer
• Checked and approved by dev