navbar_change.txt

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="navbar-header">
      <a routerLink="/" class="navbar-brand">Recipe Book</a>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
     <li class="nav-item" routerLinkActive="active" *ngIf="isAuthenticated">
	  <a class="nav-link" routerLink="/recipes">Recipes</a>
	</li>
        <li class="nav-item" routerLinkActive="active" *ngIf="!isAuthenticated">
          <a class="nav-link" routerLink="/auth">Authenticate</a>
        </li>
        <li class="nav-item" routerLinkActive="active" >
          <a class="nav-link" routerLink="/shopping-list">Shopping List</a>
        </li>  
    </ul>
    <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <a class="nav-link" style="cursor: pointer;" *ngIf="isAuthenticated" (click)="onLogOut()">Logout</a>
         </li>
        <li class="nav-item">
           <a class="nav-link" style="cursor: pointer;"*ngIf="isAuthenticated" (click)="onSaveData()">Save Data</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="cursor: pointer;" *ngIf="isAuthenticated" (click)="onFetchData()">Fetch Data</a>
          </li>
     </ul>
  </div>  
</nav>