<!-- Nav --> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light"> <div class="container"> <a class="navbar-brand roboto" [routerLink]="['/']"> <span class="fh-fade">fh</span> <span class="rainbow"> & </span> <span class="sons-fade">sons</span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link text-dark" [routerLink]="['/about']">About</a> </li> <li class="nav-item"> <a class="nav-link text-dark" [routerLink]="['/store']">Store</a> </li> <li class="nav-item"> <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a> </li> </ul> <button mat-stroked-button class="ml-auto" color="primary" data-toggle="modal" data-target="#loginModal">Login</button> </div> </div> </nav> <!-- Content --> <div> <div style="height: 56px"></div> <router-outlet></router-outlet> </div> <!-- Footer --> <footer> <div class="container-fluid bg-light"> <div class="container"> <div class="d-inline-block py-3"> <div class="d-none d-md-inline-block align-top mr-5"> <h5>MAIN MENU</h5> <ul style="list-style-type: none; padding-left: 0;"> <li> <a [routerLink]="['/about']">About</a> </li> <li> <a [routerLink]="['/store']">Store</a> </li> <li> <a [routerLink]="['/formulaManager']">Formula Manager</a> </li> </ul> </div> <div class="d-none d-md-inline-block align-top mr-5"> <h5>PRODUCTS</h5> <ul style="list-style-type: none; padding-left: 0; columns: 3;"> <li *ngFor="let c of categories | async"> <a [routerLink]="['/store', c.name]">{{c.name}}</a> </li> </ul> </div> <div class="align-top d-inline-block"> <h5>CONTACT</h5> <p> Toll Free:1-888-422-7737 <br> Local: 416-744-2723 <br> Fax: 416-744-4078 </p> </div> </div> </div> </div> <div class="container-fluid bg-white"> <div class="container text-center"> <p class="mb-0 p-2">© 2018 fh & sons. Created By <a href="http://zakscode.com">Zak Timson</a> </p> </div> </div> </footer> <!-- Login Modal --> <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Login</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div id="incorrectAlert" class="alert alert-danger collapse" role="alert">Username or password is incorrect.</div> <input id="username" class="form-control mb-3" placeholder="Username"> <input id="password" class="form-control" type="password" placeholder="Password"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button id="loginBtn" type="button" class="btn btn-primary">Login</button> </div> </div> </div> </div>