0

0

0

How to create a vertical menu in React.js? | Beginner Frontend Coding Challenge | UI Machine Coding Round | JavaScript

85

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.