Setup

$ docker-compose up

Visit http://localhost:3000

What we're building

This thought experiment uses a tree-like data structure to store the data for the menu. It then walks the tree and selects the React component to correctly render the content based on a node's type.

Most interesting files

• The menu data
• The renderMenu function
• The components
  • MainMenu
  • MainMenuNav
  • MainMenuNavItem
  • MainMenuSeparator

Other thoughts

By moving the onClick handlers to another file and referencing them only by name (as a string), it would be easier to write tests. Also, that would mean that the entire tree could be serialized as JSON. That could be handy, for example, if there was a toggle to change the keyboard shortcuts to accommodate different OSs, for example.