UI for add item

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

@@ -47,6 +47,55 @@
                 </td>
             </tr>
 		</table>
-	</section>
+    </section>
+
+    <section class="popup" [ngClass]="{'active' : showAddItemModal }">
+        <div class="popup-box">
+            <header> Add Item </header>
+            
+            <ul class="input-list">
+                <li *ngIf="newItem.image_url">
+                    <img [src]="newItem.image_url">
+                </li>
+                <li>
+                    <label> Image URL </label>
+                    <input type="text" [(ngModel)]="newItem.image_url">
+                </li>
+                <li>
+                    <label> Item Name </label>
+                    <input type="text" [(ngModel)]="newItem.menu_item_name">
+                </li>
+                <li>
+                    <label> Is Vegetarian? </label>
+                    <div class="toggle" [ngClass]="{'on' : newItem.is_vegetarian }"
+                        (click)="newItem.is_vegetarian = !newItem.is_vegetarian">
+                        <div class="knob"></div>
+                    </div>
+                </li>
+                <li>
+                    <label> Price in INR </label>
+                    <input type="number" [(ngModel)]="newItem.item_price">
+                </li>
+                <li>
+                    <label> Discount in INR </label>
+                    <input type="number" [(ngModel)]="newItem.item_discount">
+                </li>
+                <li>
+                    <label> Waiting Time (In Minutes) </label>
+                    <input type="number" [(ngModel)]="newItem.wait_duration">
+                </li>
+            </ul>
+
+            <div class="action-buttons">
+                <button class="rect-button" (click)="addNewItem()"> Submit </button>
+                <button class="rect-button" (click)="showAddItemModal = false"> Cancel </button>
+            </div>
+        </div>
+    </section>
+    
+
+    <button class="add-item-button active" (click)="showAddItemModal = true">
+        <i class="icon ion-md-add"></i>
+    </button>
 
 </div>

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

@@ -173,6 +173,10 @@
         &:nth-child(1) {
             padding-left: 10px;
         }
+
+        &:nth-child(7) {
+            padding-left: 10px;
+        }
 	}
 }
 .subscribed-offers {
@@ -413,3 +417,94 @@
 		}
 	}
 }
+
+
+.add-item-button {
+	position: fixed;
+	right: 50px;
+	bottom: 80px;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: var(--brand-blue);
+	color: white;
+	border: 0px;
+	font-size: 20px;
+	transform: scale(0);
+	transition: transform 0.3s;
+
+	&.active {
+		transform: scale(1);
+		animation: ripple-effect 1s linear;
+		animation-iteration-count: 3;
+	}
+}
+
+@keyframes ripple-effect {
+	0% {
+		box-shadow: 0 0 0 10px rgba(black, 0.3);
+	}
+	30% {
+		box-shadow: 0 0 0 20px rgba(black, 0.2);
+	}
+	60% {
+		box-shadow: 0 0 0 30px rgba(black, 0.1);
+	}
+	100% {
+		box-shadow: 0 0 0 50px rgba(black, 0);
+	}
+}
+
+.popup-box {
+    width: 400px;
+    padding: 15px;
+
+    .input-list {
+        list-style: none;
+        padding: 0;
+        margin: 10px 0;
+    }
+
+    li {
+        text-align: left;
+        margin: 20px 0;
+        position: relative;
+
+        label {
+            display: block;
+            font-size: 14px;
+            color: dimgrey;
+            font-weight: 500;
+        }
+
+        img {
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            box-shadow: 0px 0px 5px var(--grey);
+            margin: 0 auto;
+            display: block;
+        }
+
+        input {
+            width: 100%;
+            display: block;
+            height: 40px;
+            border-radius: 5px;
+            border: 2px solid var(--grey);
+            margin-top: 10px;
+            padding: 0 10px;
+            font-size: 16px;
+
+            &:focus {
+                border-color: var(--brand-blue);
+            }
+        }
+
+        .toggle {
+            margin: 0;
+            margin-top: 10px;
+            cursor: pointer;
+        }
+    }
+}

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

@@ -13,6 +13,32 @@ export class MenuItemsComponent implements OnInit {
     searchTerm: string = '';
     menuItems: any = [];
 
+    showAddItemModal: boolean = true;
+
+    newItem: {
+        image_url: string,
+        is_available: boolean,
+        is_vegetarian: boolean,
+        item_categories: Array<any>,
+        item_discount: number,
+        item_price: number,
+        menu_item_name: string,
+        rating: number,
+        soft_delete: boolean,
+        wait_duration: number,
+    } = {
+        image_url: '',
+        is_available: false,
+        is_vegetarian: true,
+        item_categories: [],
+        item_discount: null,
+        item_price: null,
+        menu_item_name: '',
+        rating: 3,
+        soft_delete: false,
+        wait_duration: 0
+    };
+
 	constructor(
         private itemService: ItemService
     ) { }
@@ -53,4 +79,8 @@ export class MenuItemsComponent implements OnInit {
         });
     }
 
+    addNewItem() {
+        console.log(this.newItem);
+    }
+
 }

src/styles.scss

@@ -108,7 +108,7 @@ button {
 	.popup-box {
 		background-color: white;
 		border-radius: 10px;
-		padding: 50px;
+		padding: 10px;
 		text-align: center;
 		transform: scale(0);
 		transition: transform 0.3s;