vendor-app/src/app/widgets-holder/widgets-holder.component.html

<section class="nav-bar">
	<img src="assets/logo.svg" alt="Logo">

	<nav>
		<a [ngClass]="{'active' : selected_nav === 'faq'}"
		(click)="selected_nav = 'faq'"> FAQ's </a>
		<a [ngClass]="{'active' : selected_nav === 'support'}"
		(click)="selected_nav = 'support'"> Support </a>
		<button class="rect-button"> Logout </button>
	</nav>
</section>


<div class="container">
	<section class="side-navigation">
		<section class="user-info">
			<img>
			<div class="name"> John Doe </div>
			<div class="other-info"> Member ID: 03293 </div>
			<div class="other-info"> Restaurant Rating: <i class="icon ion-ios-star"></i> 4.0 </div>
		</section>

		<ul>
			<li [ngClass]="{'active' : selected_nav === 'dashboard'}" (click)="selected_nav = 'dashboard'">
				<i class="icon ion-ios-home"></i> Dashboard
			</li>
			<li [ngClass]="{'active' : selected_nav === 'orders'}" (click)="selected_nav = 'orders'">
				<i class="icon ion-ios-cube"></i> Orders
			</li>
			<li [ngClass]="{'active' : selected_nav === 'items'}" (click)="selected_nav = 'items'">
				<i class="icon ion-ios-clipboard"></i> Menu Items & Offers
			</li>
			<li [ngClass]="{'active' : selected_nav === 'schedule'}" (click)="selected_nav = 'schedule'">
				<i class="icon ion-ios-calendar"></i> Shop Schedules
			</li>
			<li [ngClass]="{'active' : selected_nav === 'profile'}" (click)="selected_nav = 'profile'">
				<i class="icon ion-ios-person"></i> Profile
			</li>
			<li [ngClass]="{'active' : selected_nav === 'settings'}" (click)="selected_nav = 'settings'">
				<i class="icon ion-ios-cog"></i> Settings
			</li>
		</ul>
	</section>

	<section class="widgets">
		<app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard>
		<app-orders *ngIf="selected_nav === 'orders'"></app-orders>
		<app-menu-items *ngIf="selected_nav === 'items'"></app-menu-items>
		<app-schedules *ngIf="selected_nav === 'schedule'"></app-schedules>
		<app-faq *ngIf="selected_nav === 'faq'"></app-faq>
	</section>
</div>