header.component.html

<header>
	<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: black;">

		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse navbar-collapse" id="navbarSupportedContent">

			<ul class="navbar-nav mr-auto">
				<li class="nav-item"  >
					<a class="nav-image" id="dash-image" (click)="resetGenerator()"><img src="assets/images/home.png"
							class=" d-block img-fluid py-3 pl-3" alt="Dashboard Image" height="42" width="42"></a>
				</li>
				<li class="nav-item" *ngIf="isLoggedIn()">
					<a class="nav-image" id="visualize-image" (click)="resetGenAndVisualize()"><img src="assets/images/graph.jpg"
							class=" d-block img-fluid py-3 pl-3" alt="Visualization Image" height="42" width="42"></a>
				</li>
			</ul>

			<form class="form-inline my-2 my-lg-0">
				<a class="nav-left-image" id="logout-image" (click)="resetAndClear()"><img
						src="assets/images/logout.png" class=" d-block img-fluid py-3 pl-3" alt="Logout Image"
						height="42" width="42" *ngIf="isLoggedIn()"></a>
			</form>

		</div>
	</nav>

	<div class="clearfix">
		<a class="logo" id="logo-image" (click)="resetGenerator()"><img src="assets/images/logo2.png"
				class=" d-block img-fluid py-3 pl-3" alt="Kinsley image"></a>
		<!-- <a class="logo" routerLink="/generator-search"><img src="assets/images/logo2.png" class=" d-block img-fluid py-3 pl-3"
				alt="Kinsley image"></a> -->
	</div>
</header>