You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.
Is your feature request related to a problem? Please describe.
The new navigation designs contain a burger menu icon, which opens a dropdown of navigation items when selected.
See burger menu in navigation in the designs in zeplin:
Once the burger menu has been interacted with, the dropdown menu is presented:
(See zeplin for margin + padding values)
Right to left designs:
Describe the solution you'd like
Add burger menu and cross icons to psammead assets.
Currently this contains the same list of nav items as the scrollable navigation, but this will not always be the case, so the navigation dropdown needs to accept a separate list than the scrollable nav.
This dropdown menu pushes the rest of the page content down, it does not overlay on top of it (just need to build the dropdown in psammead).
When the user interacts with the cross icon, the dropdown menu is closed. The interaction will need to be handled differently between Canonical and AMP pages - the psammead package should export presentational components that can be composed into the navigation, and controlled when integrated.
We can reuse the presentational components between AMP and Canonical exports, which accept event handlers in a format such as this (this is not meant to represent the final component design, just to show how to accept AMP and Canonical actions):
tochwill
changed the title
Create navigation dropdown and toggle components
Navigation: Create dropdown and toggle components
Nov 7, 2019
tochwill
removed
the
Refinement Needed
This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test.
label
Nov 7, 2019
Looks good to me except one small font size with the dropdown menu ie) at 360-599px expected font size is 15px actual its 16px.If UX is fine with it then this PR can be merged.
Is your feature request related to a problem? Please describe.
The new navigation designs contain a burger menu icon, which opens a dropdown of navigation items when selected.
See burger menu in navigation in the designs in zeplin:
![Screenshot 2019-11-04 at 17 19 57](https://user-images.githubusercontent.com/6690955/68142464-641de900-ff27-11e9-928d-e4f6a25b8a16.png)
Once the burger menu has been interacted with, the dropdown menu is presented:
![Screenshot 2019-11-04 at 17 20 51](https://user-images.githubusercontent.com/6690955/68142513-7c8e0380-ff27-11e9-889c-b1685ac623b0.png)
(See zeplin for margin + padding values)
Right to left designs:
![Screenshot 2019-11-04 at 17 21 47](https://user-images.githubusercontent.com/6690955/68142567-9af3ff00-ff27-11e9-8940-48a1b613b4fc.png)
Describe the solution you'd like
Add burger menu and cross icons to psammead assets.
Currently this contains the same list of nav items as the scrollable navigation, but this will not always be the case, so the navigation dropdown needs to accept a separate list than the scrollable nav.
This dropdown menu pushes the rest of the page content down, it does not overlay on top of it (just need to build the dropdown in psammead).
When the user interacts with the cross icon, the dropdown menu is closed. The interaction will need to be handled differently between Canonical and AMP pages - the psammead package should export presentational components that can be composed into the navigation, and controlled when integrated.
We can reuse the presentational components between AMP and Canonical exports, which accept event handlers in a format such as this (this is not meant to represent the final component design, just to show how to accept AMP and Canonical actions):
Similary for the burger menu:
(There may be a preferable name for this component than 'Burger' 🍔 )
The burger menu and dropdown are only rendered < 600px.
Screenreader UX can be found in zeplin: https://app.zeplin.io/project/5c8a5e021d454124ef90669f/screen/5db9725f3cab221121ebab72
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Testing notes
Storybook testing in psammead
Dev insight: Will there be any potential regression? etc
Additional context
Add any other context or screenshots about the feature request here.
The text was updated successfully, but these errors were encountered: