How to create a vertical menu in React.js? | Beginner Frontend Coding Challenge | UI Machine Coding Round | JavaScript
@Devtools Tech
In this question, you need to build a simple vertical menu. Please check the mockup & demo below to better understand the final outcome.
Mockup
Demo
Live Demo
Please check the sidebar here:
https://devtools.tech/dashboard/questions
Requirements
- Menu should be vertical.
- The component architecture should be in the form of Compound Components.
<Menu>
<Menu.Item>Home</Menu.Item>
<Menu.Item>Questions</Menu.Item>
<Menu.Item>Resources</Menu.Item>
</Menu>
- Menu Item should have a background color as
rgba(0, 0, 0, 0.03)
on hover. - Each Menu Item must have a right arrow that should animate on hover (see demo). You can use
react-icons
library for icons.
Resources
- React Icons: https://react-icons.github.io/react-icons
- Compound Components: https://www.youtube.com/watch?v=dkh9-zICMQg
Submission
Feel free to add more functionalities and enhancements you see fit.
Please start the timer before starting and finish your solution within 30-45 mins. Share your solution with us on Twitter or LinkedIn.
React
React