mi6
Patterns: Top-navigation (+ variations: mega menu and section container alignment) & side navigation
Summary
Offer basic pattern examples and code on the site for users to be able to copy the code and use them straight away.
💬 Description
These patterns initially should be:
- A starter app (not with surrounding technology, just a site with with side nav/top nav, page header, content and a footer)
- Other popular components used together
This issue should include testing. One idea: which may mean duplicating the examples in Storybook, unless there is a way to automate this. Although, bare in mind any failing tests on this should be picked up in ic-ui-kit as otherwise it'll have been released before the tests fail on ic-ui-kit. Also issues if we use visual testing they'll break whenever we change components, which would mean they need fixing on ic-design-system too at the point of release, making it a difficult process. Open to a new idea.
They should include imports, which may be linked to another issue that looks how we display them.
💰 Use value
- Tests components integrated together
- Save customers time by offering templates that can just be copy and pasted into their app
📝 Acceptance Criteria
Given that a top navigation pattern is being used When the screen resizes Then all components follow their responsive behaviours
Given the footer is on all of the patterns When the patterns are initially opened Then ensure the classification banner has been added at full width, at the bottom of each screen and is anchored
Given the footer is used on all patterns When the user opens the page Then ensure that the footer is always below the fold in it's entirety
Given there are two options for how the side navigation should appear at the extra-small breakpoints (collapsed or expanded) When the extra-small breakpoint is used Then default to the collapsed varient
✏ Designs
Top-navigation based patterns must include: Top-navigation, Footer, section container & classification banner.
They can also include: Mega-menu and page header
Side-navigation based patterns must include: Side-navigation, Footer, section container & classification banner.
🧾 Guidance
If there's written guidance or documentation, include it here.
