0
Hours
0
Minutes
0
Seconds

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

@Devtools Tech
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

Vertical Menu 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

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.