Recently I came across a certain area in application example navigation bar, where there is a lot of sub-menus which need to be shown. An example would be like this
If you look at the menu items from a front end or developer’s brain, it can be summarized as
- It is just a list of menu items
- Has a name
- Has an icon
- It should redirect to subpage or URL
- Displayed in an unordered list
So usually we would write HTML template to render the above image like this
So the li is repeated multiple times with an appropriate class and the name of the item. Let’s say during development we keep adding menu items. But in a long span, it becomes redundant and there will be 500 lines just for the sidebar. So how do we improve it?
The Engineering brain kicks in
The for loop that you studied in your university must be kicking in your head. You can iterate over a list of items, because since its sidebar and the menu’s will be known values, so you can always iterate and display them.
I hope this helps you in writing much more awesome HTML templates. You might think oh wait, even my application has a lot of menu and submenu. Let me conclude this by saying a famous quote from Robert Baden-Powell
Try and leave this world a little better than you found it, and when your turn comes to die, you can die happy in feeling that at any rate, you have not wasted your time but have done your best.