If we closely inspect the very simple menu above, we can see patterns arise as to how it is presented. We can identify two unique Regions that contain the majority of the content on this menu.
The two that we identified can be called dbrg-region-ready and dbrg-region-have-a-byte. In Polymer we must namespace each component, so to make them easily identifiable in our code, we'll prepend each region name with dbrg- plus region-. dbrg represents the vendor (DeveloBurger) and region tells us that this component is a region component.
Within our menu board hierarchy, Regions are directly generated by our Layout component of which we will dive into next. By defining these sections of the menu board as self-contained components we are able to more easily reorganize the menu board. We can also contain alternate styling and internal layouts of each of these regions depending on things like the time of day and what Regions are available at that time. Here is an example of a different menu for breakfast.
Notice that the theme has now changed from dark to a light which impacts the background color and the font colors. We also now have different imagery but more importantly our Regions have changed position on the menu board and now have different internal layouts. We also have an additional Region that we are now accounting for on our menu named dbrg-region-best-friend-bar. Let's look at how these regions are defined.
Because we have already defined two of these regions (Ready and Have a Byte) all we now must do is internally account for the lighter theme and the altered layout. The ready() region is pretty straight-forward. We just need to reduce the number of cells in our product table to two. The Have A Byte region is slightly more complex because we are now hiding the Byte Codes sub-section and we are now horizontally displaying the sandwich-part choice tables.