Imagine we have a vehicle catalog site. Please, implement a multilevel menu component components/SideMenu/index.tsx
using data from the useSideMenu
hook. Design example:
- You are not limited in using any packages/libraries. However do not use ones for implementing menu component.
- Do not modify
useSideMenu
. - Each level should have a left indent similarly to the image above. Let's take
1rem
for the left indent and formulai * 1rem
, wherei
- is a level number. So for the first level the indent equals0rem
, for the second =1rem
, for the third one =2rem
, etc. - Note that the number of menu levels is unlimited and may change from one vehicle types to another. For example, for the
Bikes
we may have less levels than for theCars
and for other types of vehicle it may differ. - Menu link which property
to
equals to the current url path should be highlighted by text color or background color. - Menu item may be either a navigation link or an item which can make some action (e.g. Logout). Please, check types
lib/types/navigation.ts
anduseSideMenu
. - Solution should be published online. For example, you can use Stackblitz for that purpose.