Sub-level navigation

We'll start by adding sub-level navigation to the Workout Builder. We have already imported our SubNavMainComponent into the Workout Builder. But, currently it is just displaying placeholder content:

We'll now replace that content with three router links: Home, New Workout, and New Exercise.

Open the sub-nav-main.component.html file and change the HTML in it to the following:

<nav class="navbar fixed-top navbar-dark bg-primary mt-5">
    <div>
        <a [routerLink]="['/builder/workouts']" class="btn btn-primary">
        <span class="ion-md-home"></span> Home
        </a>
        <a [routerLink]="['/builder/workout/new']" class="btn btn-primary">
        <span class="ion-md-add"></span> New Workout
        </a>
        <a [routerLink]="['/builder/exercise/new']" class="btn btn-primary">
        <span class="ion-md-add"></span> New Exercise
        </a>
    </div>
</nav>

Now, rerun the application and you will see the three navigation links. If we click on the New Exercise link button, we will be routed to ExerciseComponent and its view will appear in the Router Outlet in the Workout Builder view:

The New Workout link button will work in a similar fashion; when clicked on, it will take the user to the WorkoutComponent and display its view in the router outlet. Clicking on the Home link button will return the user to the WorkoutsComponent and view.