Sidenav added

package-lock.json

@@ -5861,6 +5861,11 @@
       "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
       "dev": true
     },
+    "ionicons": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.6.3.tgz",
+      "integrity": "sha512-cgP+VIr2cTJpMfFyVHTerq6n2jeoiGboVoe3GlaAo5zoSBDAEXORwUZhv6m+lCyxlsHCS3nqPUE+MKyZU71t8Q=="
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~8.2.9",
     "@angular/platform-browser-dynamic": "~8.2.9",
     "@angular/router": "~8.2.9",
+    "ionicons": "^4.6.3",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

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

@@ -0,0 +1,42 @@
+<section class="nav-bar">
+	<img src="assets/logo.svg" alt="Logo">
+
+	<nav>
+		<a> FAQ's </a>
+		<a> Support </a>
+		<button class="rect-button"> Logout </button>
+	</nav>
+</section>
+
+
+<div class="widgets-holder">
+	<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: 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>
+</div>

src/app/widgets-holder/widgets-holder.component.scss

@@ -0,0 +1,148 @@
+.nav-bar {
+	display: flex;
+	width: 100%;
+	height: 70px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 4%;
+	box-shadow: 0px 0px 8px var(--grey);
+	position: relative;
+	z-index: 1;
+	background-color: white;
+
+	img {
+		width: 70px;
+	}
+
+	nav {
+
+		a, button {
+			margin: 0 15px;
+		}
+
+		a {
+			color: var(--grey);
+			font-size: 16px;
+		}
+
+		button {
+			background-color: transparent;
+			border: 2px solid var(--brand-blue);
+			color: var(--brand-blue);
+			width: 100px;
+			height: 40px;
+			margin-right: 0;
+		}
+	}
+}
+
+.widgets-holder {
+	display: flex;
+	align-items: stretch;
+	width: 100%;
+	background-color: #efefef;
+}
+
+.side-navigation {
+	background-color: white;
+	width: 20%;
+	height: calc(100vh - 70px);
+	overflow: auto;
+
+	&:hover {
+		&::-webkit-scrollbar {
+		  display: block;
+		}
+	}
+
+	&::-webkit-scrollbar {
+		width: 8px;
+		display: none;
+	}
+
+		/* Track */
+	&::-webkit-scrollbar-track {
+		background-color: white;
+	}
+	/* Handle */
+	&::-webkit-scrollbar-thumb {
+		background-color: rgba(black, 0.2);
+	}
+	/* Handle on hover */
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(black, 0.5);
+	}
+
+	.user-info {
+		text-align: center;
+		line-height: 1.8;
+
+		img {
+			width: 70px;
+			height: 70px;
+			background-color: #efefef;
+			border-radius: 50%;
+			margin: 40px auto 20px;
+			display: block;
+		}
+
+		.name {
+			font-size: 16px;
+			color: black;
+			font-weight: 500;
+		}
+
+		.other-info {
+			font-size: 15px;
+			color: var(--grey);
+		}
+	}
+
+	ul {
+		width: 100%;
+		margin: 40px 0 40px auto;
+		list-style: none;
+
+		li {
+			font-size: 15px;
+			color: var(--grey);
+			padding: 20px 20px 20px 40px;
+			letter-spacing: 0.5px;
+			cursor: pointer;
+			position: relative;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 10%;
+				top: 0;
+				width: 80%;
+				height: 1px;
+				background-color: #efefef;
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				right: 0;
+				width: 3px;
+				background-color: transparent;
+				height: 100%;
+				top: 0;
+			}
+
+			&.active {
+				color: var(--brand-blue);
+
+				&::after {
+					background-color: var(--brand-blue);
+				}
+			}
+
+			i {
+				font-size: 20px;
+				margin-right: 15px;
+			}
+		}
+	}
+}

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
+	selected_nav: string = 'dashboard';
 
 	constructor() { }
 

src/assets/logo.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 121 55" style="enable-background:new 0 0 121 55;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E5811F;}
+	.st1{fill:#F7931E;}
+	.st2{fill:#007bcc;}
+	.st3{fill:black;}
+	.st4{fill:#004fcc;}
+</style>
+<g>
+	<path class="st0" d="M80.59,37.41l11.79,11.73c6.5,6.5,17.03,6.5,23.52,0l0,0c6.5-6.5,6.5-17.03,0-23.52l-12.24-12.24l-7.46-7.46
+		l-0.14-0.14C94,3.72,91.53,2.31,88.91,1.56c-5.92-1.77-12.59-0.31-17.26,4.36L60.39,17.17L80.59,37.41z"/>
+	<path class="st1" d="M80.59,37.41l11.79,11.73c6.5,6.5,17.03,6.5,23.52,0l0,0c6.5-6.5,6.5-17.03,0-23.52l-12.24-12.24l-7.46-7.46
+		l-0.14-0.14C95,4.71,93.81,3.81,92.55,3.09c-1.01-0.58-2.68-1.39-3.64-1.53c-3.95-0.6-10.01,7.79-11.74,16.01
+		C75.26,26.63,78.86,34.28,80.59,37.41z"/>
+	<path class="st2" d="M6.6,50.1L4.7,48.19c-5.97-5.97-5.97-15.65,0-21.62L26.44,4.83c5.97-5.97,15.65-5.97,21.62,0l1.91,1.91
+		c5.97,5.97,5.97,15.65,0,21.62L28.22,50.1C22.25,56.07,12.57,56.07,6.6,50.1z"/>
+	<path class="st2" d="M80.61,37.38L67.9,50.1c-5.97,5.97-15.65,5.97-21.62,0L24.53,28.36c-5.97-5.97-5.97-15.65,0-21.62l1.91-1.91
+		c5.97-5.97,15.65-5.97,21.62,0L80.61,37.38z"/>
+	<path class="st3" d="M80.61,37.38L67.77,50.22c-5.9,5.9-15.47,5.9-21.38,0l-9.15-9.15l5.29-5.29c10.07-10.07,26.39-10.07,36.46,0
+		L80.61,37.38z"/>
+	<path class="st4" d="M80.61,37.38L67.77,50.22c-5.9,5.9-15.47,5.9-21.38,0l-6.04-6.04l8.15-8.15c8.49-8.49,22.25-8.49,30.74,0
+		L80.61,37.38z"/>
+</g>
+</svg>

src/styles.scss

@@ -1,12 +1,12 @@
 /* You can add global styles to this file, and also import other style files */
+$ionicons-font-path: "~ionicons/dist/fonts";
+@import "~ionicons/dist/scss/ionicons.scss";
 
 :root {
-  --brand-blue: #1881e5;
-  --background-blue: #f5f7fa;
-  --brand-grey: #9a9a9a;
-  --brand-black: #1b1d1e;
-  --brand-dark-grey: #666666;
+  --brand-blue: #007bcc;
   --brand-yellow: #f79319;
+  --grey: #9a9a9a;
+  --dark-grey: #666666;
 }