design-system
design-system copied to clipboard
[component]: Main navigation
Create a standalone usable version of the <post-main-navigation> component currently living in the internet-header package (https://github.com/swisspost/design-system/tree/main/packages/internet-header/src/components/post-main-navigation). At the moment, this component relies on a config file, this new component will be independent of the config. This component is first going to be used by the Post Portal only, therefore the first iteration can be tailored to be used in a next.js environment. A future version will be improved to be more interoperable and easier to use.
Design
https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=558-7012&t=jcPdHnpzyiTuN0T3-1
Requirements
- Top level link behaviour: On the top level, there can only be megadropdown-buttons or links. It's not possible like today to combine both (first tap opens megadropdown, second tap opens link). This should make the implementation somewhat easier
- Mobile behaviour: The main navigation component should behave roughly the same as today with the layered menu on mobile and the megadropdown on desktop
- Top level overflow behaviour: The links on the top level can overflow to the right (if someone was to put 1000 links there). This requirement could also be a candidate for the next iteration.
- Mobile overflow behaviour: Any linklist should be scrollable vertically
- All links and texts should be slotted as this version of the main navigation does not rely on any configuration file any more
- Tokens: for the time being, we're not tokenising any header components or styles
Reference
- Current navigation https://www.post.ch/de
### Tasks
- [ ] Create a `<post-main-navigation>` component
- [ ] Document this component in storybook
- [ ] Create e2e tests
- [ ] Design review