From e361fd6e882a33d2528c741b7c590123bf6b6ebd Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 28 Jul 2023 11:54:43 +0700
Subject: [PATCH] Update code 28/07

---
 src/layouts/menu.pug          | 12 ++++++------
 src/styles/layouts/_menu.scss | 26 ++++++++++++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/layouts/menu.pug b/src/layouts/menu.pug
index 8e6a377..0cdd49a 100644
--- a/src/layouts/menu.pug
+++ b/src/layouts/menu.pug
@@ -1,12 +1,12 @@
 - var image_menu_path = "./assets/images/menu/";
 - var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"];
-- var description_text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry";
-- var image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"];
+- var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"];
+- var default_food_data = { price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
 
 section.menu
   .menu__container
     h2.menu__heading
-      span.primary-text Menu
+      span.primary-text= Menu
       = " That "
       span.secondary-text Always
       = " Make You Fall In "
@@ -15,7 +15,7 @@ section.menu
       each item in list_category
         a.menu__category-item.link-text(href="javascript:void(0)")= item
     .menu__card-list
-      each url in image_food
-        - var food = { imageUrl: url, price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: description_text, avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
+      each url in list_image_food
+        - var image_food = { imageUrl: url };
 
-        +foodItemCard(food)
+        +foodItemCard({ ...image_food, ...default_food_data })
diff --git a/src/styles/layouts/_menu.scss b/src/styles/layouts/_menu.scss
index 4dbd4cc..fbe6dd1 100644
--- a/src/styles/layouts/_menu.scss
+++ b/src/styles/layouts/_menu.scss
@@ -1,16 +1,28 @@
+%mr-inline-auto {
+  margin-inline: auto;
+}
+
+%style-category-item {
+  font-size: $fs-md;
+  padding: 8px 18px;
+  border-radius: 50px;
+}
+
 .menu {
   &__container {
+    @extend %mr-inline-auto;
+
     padding-top: 150px;
     max-width: 424px;
-    margin-inline: auto;
   }
 
   &__heading {
+    @extend %mr-inline-auto;
+
     font-size: $fs-x-lg;
     font-weight: 700;
     text-align: center;
     max-width: 363px;
-    margin-inline: auto;
   }
 
   &__list-category {
@@ -29,21 +41,19 @@
   }
 
   &__category-item:focus {
-    font-size: $fs-md;
+    @extend %style-category-item;
+
     color: $white;
     background-color: $primary-color;
     border: 2px solid $primary-color;
-    padding: 8px 18px;
-    border-radius: 50px;
   }
 
   &__category-item {
-    font-size: $fs-md;
+    @extend %style-category-item;
+
     color: $gray;
     background-color: transparent;
     border: 2px solid $black;
-    padding: 8px 18px;
-    border-radius: 50px;
   }
 
   &__card-list {