Implement mobile nav bar

[larsrickert]

Open Questions/To-dos

• @mj-hof in Figma the context area is collapsed in a 3 dot menu but they are still some icons (notification/search) displayed in the nav bar itself. Does this make sense? The context menu content is up to the project so can not really differentiate here, should we just move the whole context are to the 3 dot menu?
  • create new slot (something like "contextAreaMobile") that will remain in the nav bar even on mobile
  • content of contentArea slot will move to the 3 dot menu on mobile
• @mj-hof Is the logo not visible at all on mobile? Answer:
  • also show logo (so we can just reuse the OnyxNavAppArea component) if its given by the project

Depends on

• Concept mobile behaviour of navigation bar #995

Why?

The nav bar should be responsive and adapt on mobile breakpoints.

Design

Figma link.

Acceptance criteria

• the design is implemented
• when reaching xs breakpoint or smaller, the nav bar should switch to the mobile layout
• when burger menu is open: app area (app name + logo is shown instead of active page name)
• if a page is active and burger menu is closed, the active page name is displayed, otherwise the app name
• the context area collapses into a "3 dot menu"
• the nav items collapse into a burger menu

Definition of Done

• covered by component tests
• screenshot tests are updated
• updated version + documentation is deployed
• Storybook can show the feature
• Storybook code snippet of new/changed examples are checked that they are generated correctly
• Set task to In Approval

Approval

• Storybook
• approved by designer @mj-hof
• approved by dev @BoppLi

Implementation details

• if possible prefer a CSS implementation
• use container queries instead of media queries so the component behaves correctly also when e.g. displayed inside Storybook (and use our container query utils)
• prevent cloning DOM nodes

Applicable ARIA Pattern

Menu button

[mj-hof]

Reconsider the behaviour of the "App icon + App name" etc with @jannick-ux and the agreement of UXUI department

[BoppLi]

Approval feedback @larsrickert

1. could you create a follow up ticket for smoother open/close animations (and link it here), if it doesn't exist already?
2. when testing it in the alpha app, I noticed that the mobile menu does not close after navigating to another page. is this to be done on "project side", if so, could you add this to the alpha app's nav bar? or is this a feature we should take care of, e.g. with an mobileOpen prop?
3. in the Storybook link you created above, the example does not fire any events when clicking on nav items. is this intentional / out of scope?

[larsrickert]

Approval feedback @larsrickert

1. I think that should be covered by Concept animations #54 in general
2. Since the navigation is done via the Vue router onyx can not handle this automatically. We would propably need to create a property for the open state of current route
3. Thats intentional, the click events are emitted by the nav buttons, not the nav bar itself so its not logged in Storybook. You need to add a click handler to the OnyxNavButton inside the project

[BoppLi]

2. could you add that property and connect it in the alpha app? imho the UX is not the best when it just stays open