DApp-1549 Dropdown/Menu component

[corlard3y]

Pull Request Template

1545

• #1545

Description

• Introduce menu in blocks folder which has Menu component, which serves as parent component to the Menu Item component
• Added MenuItem component, which is the list of all items in the Menu component.
• Added Dropdown component too, which has a trigger to open the Menu(overlay), either on Hover action, or onClick action.
• Also, added light and dark mode support to these components

Problem/Feature

Create a dropdown and menu package in the blocks folder and introduce these dropdown and menu items as a react component so that these could be reused in other component.

Figma: https://www.figma.com/design/FvJL0JWHlsVohsHTERB1Lh/Push-Design-Foundations-%5BFuture%5D?node-id=2663-23523&t=XRHuzgCLtQkYnb4h-1

Type of Change

• [ ] Bug fix
• [x] New feature
• [ ] Code refactor
• [ ] Documentation update
• [ ] Other (please describe):

Checklist

• [ ] Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • [ ] Quick PR label added
• [ ] Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • [ ] DO NOT Merge PR label added

Frontend Guidelines

• [ ] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [ ] Engineer has tested the changes on their local environment
• [ ] Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Explain the previous behavior

• After: What's changed now

Additional Context

Review & Approvals

• [ ] Self-review completed
• [ ] Code review by at least one other engineer
• [ ] Documentation updates if applicable

Notes

[github-actions[bot]]

In the first file:

1. Check if all imports are being used.
2. In the StyledDropdown component, there is a comment using // instead of /* */.
3. The logic in function getPlacementClass seems correct.
4. Check if the DropdownProps definition is correct.

In the second file:

1. Check if all imports are being used.
2. In the StyledMenu component, padding is missing unit. It should be specified like padding: 8px 0;.
3. Check if the MenuProps definition is correct.

In the third file:

1. Check if all imports are being used.
2. The StyledMenuItem component is using MenuItemProps instead of MenuItemComponentProps.
3. In MenuItem component, the icon prop should be optional.
4. Verify if MenuProps is correctly used in MenuItem.

If all the above points are handled, you can write 'All looks good.' after reviewing the changes.

[corlard3y]

Added the basic flow of the dropdown and Menu, Pls lmk what changes can be added. Also, used hardcoding within the dropdown component so I will need your assistance/direction within the children(isOpen) param, and title ig @rohitmalhotra1420

[github-actions[bot]]

PR Preview Action v1.4.7 :---: :rocket: Deployed preview to https://push-protocol.github.io/push-dapp/pr-preview/pr-1648/ on branch gh-pages at 2024-06-17 10:47 UTC