From 75bb039e31122fbc76aa8266b7777a74060a3c81 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 28 Jul 2023 11:32:37 +0700
Subject: [PATCH 1/2] Implement style for menu section

---
 .../practice-02/src/styles/layouts/_menu.scss | 97 +++++++++++++++++++
 practice/practice-02/src/styles/main.scss     |  1 +
 2 files changed, 98 insertions(+)
 create mode 100644 practice/practice-02/src/styles/layouts/_menu.scss

diff --git a/practice/practice-02/src/styles/layouts/_menu.scss b/practice/practice-02/src/styles/layouts/_menu.scss
new file mode 100644
index 0000000..4dbd4cc
--- /dev/null
+++ b/practice/practice-02/src/styles/layouts/_menu.scss
@@ -0,0 +1,97 @@
+.menu {
+  &__container {
+    padding-top: 150px;
+    max-width: 424px;
+    margin-inline: auto;
+  }
+
+  &__heading {
+    font-size: $fs-x-lg;
+    font-weight: 700;
+    text-align: center;
+    max-width: 363px;
+    margin-inline: auto;
+  }
+
+  &__list-category {
+    @extend %d-flex;
+    @include flex-layout($gap: 30px);
+
+    margin-top: 62px;
+    padding-left: 50px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__category-item:focus {
+    font-size: $fs-md;
+    color: $white;
+    background-color: $primary-color;
+    border: 2px solid $primary-color;
+    padding: 8px 18px;
+    border-radius: 50px;
+  }
+
+  &__category-item {
+    font-size: $fs-md;
+    color: $gray;
+    background-color: transparent;
+    border: 2px solid $black;
+    padding: 8px 18px;
+    border-radius: 50px;
+  }
+
+  &__card-list {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 100%;
+    column-gap: 18px;
+    margin-top: 43px;
+    margin-inline: 59px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .menu {
+    &__container {
+      max-width: $max-width;
+    }
+
+    &__heading {
+      max-width: 653px;
+    }
+
+    &__list-category {
+      max-width: 1018px;
+      margin-inline: 59px;
+    }
+
+    &__card-list {
+      grid-auto-columns: unset;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 66px;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .menu {
+    &__list-category {
+      max-width: 1018px;
+      margin-inline: auto;
+      padding-left: unset;
+    }
+  }
+}
diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss
index 05fa2b1..29a80c9 100644
--- a/practice/practice-02/src/styles/main.scss
+++ b/practice/practice-02/src/styles/main.scss
@@ -19,3 +19,4 @@
 @import "./layouts/welcome";
 @import "./layouts/offer";
 @import "./layouts/service";
+@import "./layouts/menu";

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

---
 .../practice-02/src/styles/layouts/_menu.scss | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/practice/practice-02/src/styles/layouts/_menu.scss b/practice/practice-02/src/styles/layouts/_menu.scss
index 4dbd4cc..fbe6dd1 100644
--- a/practice/practice-02/src/styles/layouts/_menu.scss
+++ b/practice/practice-02/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 {