Create dropdown navigation #2613
Conversation
OlgaLyubin
requested review from
jamesbhobbs,
dr3,
j-pendlebury,
jroebu14 and
sareh
as code owners
DenisHdz
requested review from
Bopchy and
AlistairGempf
and removed request for
dr3
| const storiesWithoutBrand = storiesOf( | ||
| 'Components|Navigation/without brand', | ||
| module, | ||
| ) | ||
| .addDecorator(withKnobs) | ||
| .addDecorator(ampDecorator) |
There was a problem hiding this comment.
Everything looks really good to me 👍 . Just wondering if adding an ampDecorator to all the storiesWithoutBrand was on purpose?
There was a problem hiding this comment.
Yes, this was on purpose in order to make the AMP menu button work. If you click on the AMP button now, the menu icon will change
|
@OlgaLyubin is the hamburger menu svg supposed to be in red colour?I can see that its in black colour. |
Hey! It's transparent so it's the same colour as the menu behind it |
|
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. |
|
UX is fine with the above small issue. |
Resolves #2557
Overall change:
Implemented new navigation designs that contain a burger menu button which opens a dropdown of navigation items when selected. For now these are just presentational components that will be exported to Simorgh (where the logic for interaction will be implemented).
Toggling for
AmpMenuButtonnow works in storybook (keep in mind that you might need to refresh the page because of the AMP related issue that exists in storybook for now).AmpMenuButtonusesexpandedHandlerto update theexpandedvalue of a state and depending on the value changes the icon to be rendered (hamburger or cross).Code changes:
psammead-assets