Items page partial commit

src/app/menu-items/menu-items.component.html

@@ -1 +1,106 @@
-<p>menu-items works!</p>
+<div class="container">
+	<section class="item-details">
+		<div class="widget-heading-holder">
+			<header> Menu Items </header>
+
+			<div class="tabs-holder" [ngClass]="{'left' : selectedTab === 'items', 'right': selectedTab === 'offers'}">
+				<button (click)="selectedTab = 'items'"> Items </button>
+				<button (click)="selectedTab = 'offers'"> Offers </button>
+			</div>
+		</div>
+
+		<table>
+			<tr>
+				<th> Item No </th>
+				<th> Item Name </th>
+				<th> Preperation Time </th>
+				<th> Price </th>
+				<th> Availability Status </th>
+			</tr>
+
+			<tr>
+				<td> 14344 </td>
+				<td> 8 Pc Hot &amp; Crispy </td>
+				<td> 15 Min </td>
+				<td> &#x20B9; 750 </td>
+				<td>
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</td>
+			</tr>
+
+			<tr>
+				<td> 14344 </td>
+				<td> 8 Pc Hot &amp; Crispy </td>
+				<td> 15 Min </td>
+				<td> &#x20B9; 750 </td>
+				<td>
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</td>
+			</tr>
+
+			<tr>
+				<td> 14344 </td>
+				<td> 8 Pc Hot &amp; Crispy </td>
+				<td> 15 Min </td>
+				<td> &#x20B9; 750 </td>
+				<td>
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</td>
+			</tr>
+
+			<tr>
+				<td> 14344 </td>
+				<td> 8 Pc Hot &amp; Crispy </td>
+				<td> 15 Min </td>
+				<td> &#x20B9; 750 </td>
+				<td>
+					<div class="toggle" [ngClass]="{'on' : productAvailable }"
+					(click)="productAvailable = !productAvailable">
+						<div class="knob"></div>
+					</div>
+				</td>
+			</tr>
+		</table>
+	</section>
+
+	<ul class="subscribed-offers">
+		<div class="heading">
+			<header> Subscribed Offers: </header>
+			<a> View All </a>
+		</div>
+
+		<li>
+			<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
+			</p>
+			<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
+		</li>
+
+		<li>
+			<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
+			</p>
+			<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
+		</li>
+
+		<li>
+			<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
+			</p>
+			<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
+		</li>
+	</ul>
+
+</div>

src/app/menu-items/menu-items.component.scss

@@ -0,0 +1,173 @@
+.container {
+	display: flex;
+	width: 95%;
+	margin-left: auto;
+	align-items: stretch;
+	height: 100%;
+
+	.item-details {
+		width: 65%;
+		margin-right: auto;
+	}
+}
+
+.widget-heading-holder {
+	width: 100%;
+}
+
+.tabs-holder {
+	display: flex;
+	width: auto;
+	border-radius: 20px;
+	overflow: hidden;
+	background-color: white;
+	width: 150px;
+	position: relative;
+
+	&.left {
+		button {
+			&:first-child {
+				color: white;
+			}
+		}
+	}
+
+	&.right {
+		button {
+			&:last-child {
+				color: white;
+			}
+		}
+
+		&::before {
+			transform: translateX(100%);
+		}
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		background-color: var(--brand-blue);
+		border-radius: 20px;
+		width: 50%;
+		height: 100%;
+		transition: transform 0.5s;
+	}
+
+	button {
+		position: relative;
+		border-radius: 20px;
+		border: 0;
+		font-size: 14px;
+		height: 35px;
+		width: 50%;
+		background-color: transparent;
+		color: var(--brand-blue);
+		font-weight: 500;
+		transition: color 0.3s;
+	}
+}
+
+
+table {
+	width: 100%;
+	margin: 30px 0;
+	text-align: left;
+
+	th {
+		color: var(--grey);
+		font-size: 14px;
+		font-weight: 500;
+		padding: 10px 0;
+		letter-spacing: 0.5px;
+	}
+
+	td {
+		border-top: 1px solid rgba(#cecece, 0.5);
+		padding: 10px 0;
+		color: var(--dark-grey);
+		font-size: 14px;
+		font-weight: 500;
+		letter-spacing: 1px;
+		line-height: 2;
+		vertical-align: top;
+		width: calc(100% / 5);
+
+		&:nth-child(3) {
+			padding-left: 20px;
+		}
+	}
+}
+
+.subscribed-offers {
+	width: 30%;
+	background-color: white;
+	padding: 30px 30px;
+	list-style: none;
+	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);
+	}
+
+	.heading {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+
+
+		header {
+			font-size: 16px;
+			letter-spacing: 1px;
+			font-weight: 500;
+		}
+
+		a {
+			color: var(--brand-blue);
+			text-decoration: underline;
+			font-size: 14px;
+		}
+	}
+
+	li {
+		padding: 10px 0;
+		border-top: 1px solid #cecece;
+
+		header {
+			margin: 10px 0;
+			font-size: 16px;
+			font-weight: 500;
+			color: var(--dark-grey);
+		}
+
+		p {
+			font-size: 13px;
+			color: var(--grey);
+			line-height: 1.5;
+			letter-spacing: 0.5px;
+		}
+	}
+}

src/app/menu-items/menu-items.component.ts

@@ -1,15 +1,17 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-menu-items',
-  templateUrl: './menu-items.component.html',
-  styleUrls: ['./menu-items.component.scss']
+	selector: 'app-menu-items',
+	templateUrl: './menu-items.component.html',
+	styleUrls: ['./menu-items.component.scss']
 })
 export class MenuItemsComponent implements OnInit {
+	selectedTab: string = 'items';
+	productAvailable: boolean = false;
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+	}
 
 }

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

@@ -43,5 +43,6 @@
 	<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>
 	</section>
 </div>

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

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

src/styles.scss

@@ -127,3 +127,34 @@ button {
 		}
 	}
 }
+
+
+.toggle {
+	position: relative;
+	border-radius: 20px;
+	background-color: #cecece;
+	width: 50px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+	margin: 0 auto;
+	transition: background-color 0.4s;
+
+	&.on {
+		background-color: #8cc63f;
+
+		.knob {
+			transform: translateX(calc(50px - 18px));
+		}
+	}
+
+	.knob {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background-color: white;
+		position: relative;
+		transition: transform 0.4s;
+		transform: translateX(2px);
+	}
+}