FoodLoop-Web/src/app/layouts/full-layout.component.html

<header class="app-header navbar">
  <button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>&#9776;</button>
  <a class="navbar-brand" href="#"></a>
  <ul class="nav navbar navbar-nav">
    <li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
      <a href class="nav-link dropdown-toggle" dropdownToggle (click)="false">
        <img src="assets/img/avatars/default.png" class="img-avatar" alt="avatar-image">
        <span class="d-md-down-none">{{displayName}}</span>
      </a>
      <div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">

        <div class="dropdown-header text-center"><strong>Settings</strong></div>

        <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/components/account-edit']">
          <i class="fa fa-user"></i> My Settings
        </a>
        <div class="divider"></div>
        <a class="dropdown-item" (click)="userLogout()" href="#"><i class="fa fa-lock"></i> Logout</a>
      </div>
    </li>
  </ul>
</header>

<div class="app-body">
  <div class="sidebar">
    <nav class="sidebar-nav">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></a>
        </li>
        <li class="divider"></li>
        <li class="nav-title">
          UI Elements
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
          <a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-puzzle"></i> Components</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/leaderboards']"><i class="icon-puzzle"></i> Leaderboards</a>
            </li>
             <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/account-edit']"><i class="icon-puzzle"></i> Edit Account</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/add-data']"><i class="icon-puzzle"></i> Add Data</a>
            </li>
          </ul>
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
          <a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Icons</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/font-awesome']"><i class="icon-star"></i> Font Awesome</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/simple-line-icons']"><i class="icon-star"></i> Simple Line Icons</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/widgets']"><i class="icon-calculator"></i> Widgets <span class="badge badge-info">NEW</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/charts']"><i class="icon-pie-chart"></i> Charts</a>
        </li>
        <li class="divider"></li>
        <li class="nav-title">
          Extras
        </li>
        <li class="nav-item nav-dropdown" appNavDropdown>
          <a class="nav-link nav-dropdown-toggle" href="#" appNavDropdownToggle><i class="icon-star"></i> Pages</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/login']"><i class="icon-star"></i> Login</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/register']"><i class="icon-star"></i> Register</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/404']"><i class="icon-star"></i> Error 404</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/500']"><i class="icon-star"></i> Error 500</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Main content -->
  <main class="main">

    <!-- Breadcrumb -->
    <ol class="breadcrumb">
      <app-breadcrumbs></app-breadcrumbs>
      <!-- Breadcrumb Menu-->
      <li class="breadcrumb-menu d-md-down-none">
        <!-- Currently taking up too much space being here -->
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
          <a class="btn btn-secondary" routerLinkActive="active" [routerLink]="['/components/add-data']">< &nbsp;Add Transaction</a>
          <!-- <a class="btn btn-secondary" href="#"> &nbsp;Customers This Month: {{customersThisMonth}}</a>
          <a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Money Spent this Month: {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</a>
          <a class="btn btn-secondary" href="#"> &nbsp;Points Total: {{pointsTotal}}</a>
          <a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Average Transaction Today: {{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</a> -->
        </div> 
      </li>
    </ol>

    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div><!-- /.conainer-fluid -->
  </main>

</div>

<footer class="app-footer">
  <a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.
  <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>