


You will see by the end of this post that this seemingly complicated sidebar is actually under 50 lines of code! What?!

ICONMENU MATERIAL UI MENU ITEMS NOT SHOWING CODE
That is powerful!įor example, if we look at the image below inside the red circle, the Editors part is an item of the sidebar, and the 3 items following immediately below ( Code Editor, Markdown, Text Editor) are the subsections: Some sites have sidebars that hide or render certain items based on the page route the user navigated to. This is because they can help users navigate in different ways, such as content that they may be interested in as opposed to a logical navigational menu.īut why would we even want to use recursion for sidebars? What difference does it make as opposed to writing out your sidebar items manually? If you've browsed through the internet for awhile, you might have come accross a website's sidebar and realized that some sidebar items have subsections. Sidebars are indeed essential to a web page, even if the level of its level of attention does not come first. The function should have a base condition.The function should have a condition that self destructs itself.The three rules of recursion applies when using recursion in this post: Recursion is a technique in which a function simply calls itself repeatedly until a condition has been met. Today we will be building a modern sidebar in react using recursion. In web pages, sidebars in web pages are amongst one of the most useful components that exist in the page due to their navigational functionality.
