Restructuring your app to cater to multiple layouts

At this stage, we haven't moved from the basic structure that we discussed in Chapter 1, Overview of the Dash Ecosystem, and as a reminder, Figure 11.3 shows a simplified representation of the current structure:

Figure 11.3 – The structure of a Dash app

Everything will remain the same, with the exception of the layout part. Right now, we only have one layout attribute, and everything was added to the main div. We used tabs to efficiently utilize space in some cases, and from Dash Bootstrap Components we used the Row and Col components to flexibly manage how components are displayed. To create the new layout structure, we need to create one main layout, which will serve as the skeleton of our app. In this layout, we will have an empty div, which will get populated with the appropriate content, depending on the URL we are on. Figure 11.4 shows how this skeleton might look. This is just to make...