Implement header nav "More" and "Follow Us" menu

[frano-m]

Implement configurable header nav menu for the "More" and "Follow Us" buttons to match mocks here and here using SB (Storybook).

Approach

• Create a new component NavLinkMenu in explorer/app/components/Layout/components/Header/components/NavLinkMenu
• Create a corresponding NavLinkMenu styles file for style overrides.
• Add a SB component NavLinkMenu.stories.tsx in explorer/app/components/Layout/components/Header/components/NavLinkMenu.
  • Create two stories - one for the "More" menu, and one for the "Follow Us" menu.
• Use SB npm run storybook to style and develop the new component.
• See explorer/app/components/CheckboxMenu/checkboxMenu.tsx for an example use of Mui Menu. See also an example of an icon menu and menu api.
  • See CheckboxMenu for an example on how to control the menu show/hide state. We will be using anchorEl to set the position of the menu.
  • Each menu item will need a click action to 1) close the menu and 2) push the new route (use NextRouter).
  • Style the Mui Menu using the styled component. Use the PaperProps variant "menu" - take a look in theme.ts -> MuiPaper -> styleOverrides -> menu for the css specification. Override any theme styles as required (e.g. border colour).
  • For the moment, use an un-styled <button> HTML element to control the show/hide of the menu.
• Create a new exported MenuItem interface, comprising of the following:
  • icon - ReactNode, optional.
  • label - string, required.
  • url - string, required.
• Props
  • menuItems - MenuItem[], required.
  • menuLabel - string, required.
• To create the icon prop in SB for the "Follow Us" menu, see explorer/app/components/common/Socials/socials.tsx, CustomIcon to generate social icons.

Definition of Done

• Nav menu component exists in SB only.
• Nav menu component matches mocks here and here.

[NoopDog]

HI @Arctenik, do you have enough information to start on this? Thanks, D

[hunterckx]

@frano-m Is my part of this finished?

[frano-m]

@hunterckx yes thank you!