diff --git a/src/app/menu-items/menu-items.component.html b/src/app/menu-items/menu-items.component.html
index 6c6411f..1521e0a 100644
--- a/src/app/menu-items/menu-items.component.html
+++ b/src/app/menu-items/menu-items.component.html
@@ -47,6 +47,55 @@
-
+
+
+
+
+
+
diff --git a/src/app/menu-items/menu-items.component.scss b/src/app/menu-items/menu-items.component.scss
index c61eb02..c73f19c 100644
--- a/src/app/menu-items/menu-items.component.scss
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/menu-items/menu-items.component.ts b/src/app/menu-items/menu-items.component.ts
index e10aacb..e871e2f 100644
--- a/src/app/menu-items/menu-items.component.ts
+++ b/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,
+ 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);
+ }
+
}
diff --git a/src/styles.scss b/src/styles.scss
index 84769af..681fc2b 100644
--- a/src/styles.scss
+++ b/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;