The Personal Trainer layout

The skeleton structure of Personal Trainer looks like this:

This has the following components:

• Top Nav: This contains the app branding title and history link.
• Sub Nav: This has navigation elements that change based on the active component.
• Left Nav: This contains elements that are dependent upon the active component.
• Content Area: This is where the main view for our component will display. This is where most of the action happens. We will create/edit exercises and workouts and show a list of exercises and workouts here.

Look at the source code files; there is a new folder workout-builder under trainer/src/app. It has files for each component that we described previously, with some placeholder content. We will be building these components as we go along in this chapter.

However, we first need to link up these components within the app. This requires us to define the navigation patterns for the Workout Builder app and accordingly define the app routes.