From 6ab7b0ae97de4efbb413dd64e8a17435b00472d6 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 25 Aug 2021 15:32:01 +0700
Subject: [PATCH] :art: styles: responsive header main menu

:%s
---
 .../common/Header/Header.module.scss          |  6 ++
 .../HeaderHighLight.module.scss               | 29 +++++-----
 .../HeaderMenu/HeaderMenu.module.scss         | 55 +++++++++++++------
 .../components/HeaderMenu/HeaderMenu.tsx      |  7 ++-
 .../HeaderSubMenu/HeaderSubMenu.module.scss   | 42 +++++++-------
 5 files changed, 90 insertions(+), 49 deletions(-)

diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss
index 6445db75b..9f92fc918 100644
--- a/src/components/common/Header/Header.module.scss
+++ b/src/components/common/Header/Header.module.scss
@@ -1,6 +1,12 @@
 @import "../../../styles/utilities";
 
 .header {
+  @apply sticky bg-white;
+  top: 0;
+  z-index: 9999;
+  @screen md {
+    padding-bottom: 1.6rem;
+  }
   .menu {
     padding-left: 3.2rem;
     padding-right: 3.2rem;
diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
index 5d2fb0b8b..69c5a192f 100644
--- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
@@ -1,19 +1,22 @@
 @import "../../../../../styles/utilities";
 
 .headerHighLight {
-    @apply flex justify-between items-center spacing-horizontal bg-primary caption;
-    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
-    color: var(--white);
-    .menu {
-        @apply flex items-center list-none;
-        padding: .8rem 0;
-        li {
-            &:not(:last-child) {
-                margin-right: 3.2rem;
-            }
-            a {
-                @appy no-underline;
+    @apply hidden;
+    @screen md {
+        @apply flex justify-between items-center spacing-horizontal bg-primary caption;
+        padding-top: 0.8rem;
+        padding-bottom: 0.8rem;
+        color: var(--white);
+        .menu {
+            @apply flex items-center list-none;
+            padding: .8rem 0;
+            li {
+                &:not(:last-child) {
+                    margin-right: 3.2rem;
+                }
+                a {
+                    @appy no-underline;
+                }
             }
         }
     }
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index 8e23a3720..2744411c6 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -1,33 +1,56 @@
 @import "../../../../../styles/utilities";
 
 .headerMenu {
-    @apply flex justify-between items-center bg-white;
-    padding-top: 2.4rem;
-    padding-bottom: 2.4rem;
+    padding-top: 1.6rem;
+    padding-bottom: 0.8rem;
+    @screen md {
+        @apply flex justify-between items-center;
+        padding-top: 2.4rem;
+        padding-bottom: 2.4rem;
+    }
     .left {
-        @apply flex items-center;
+        .top {
+            @apply flex justify-between items-center;
+            .iconCart {
+            }
+        }
         .inputSearch {
-            margin-left: 4.8rem;
             //todo: remove
             border: 1px solid red;
+            margin-top: 2.4rem;
             @screen lg {
                 min-width: 51.2rem;
                 max-width: 50%;
             }
         }
-    }
-    .menu {
-        @apply flex items-center list-none;
-        li {
-            @apply flex justify-center items-center w-full;
-            &:not(:last-child) {
-                margin-right: 4.8rem;
-                @screen lg {
-                    margin-right: 6.4rem;
+        @screen md {
+            @apply flex items-center;
+            .top {
+                .iconCart {
+                    @apply hidden;
                 }
             }
-            a {
-                @appy no-underline;
+            .inputSearch {
+                margin-left: 4.8rem;
+                margin-top: 0;
+            }
+        }
+    }
+    .menu {
+        @apply hidden;
+        @screen md {
+            @apply flex items-center list-none;
+            li {
+                @apply flex justify-center items-center w-full;
+                &:not(:last-child) {
+                    margin-right: 4.8rem;
+                    @screen lg {
+                        margin-right: 6.4rem;
+                    }
+                }
+                a {
+                    @appy no-underline;
+                }
             }
         }
     }
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 6e4b30370..e9161ea1d 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -26,7 +26,12 @@ const HeaderMenu = memo(({ }: Props) => {
     return (
         <section className={s.headerMenu}>
             <div className={s.left}>
-                <div>Online Grocery</div>
+                <div className={s.top}>
+                    <div>Online Grocery</div>
+                    <button className={s.iconCart}>
+                        <IconBuy />
+                    </button>
+                </div>
                 <div className={s.inputSearch}>
                     <InputSearch />
                 </div>
diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
index b10925877..bcd6f4121 100644
--- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
+++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
@@ -1,28 +1,32 @@
 @import "../../../../../styles/utilities";
 
 .headerSubMenu {
-    padding-bottom: 0.8rem;
-    @screen lg {
-        @apply flex justify-between items-center;
-    }
-    .menu {
-        @apply flex items-center list-none;
-        margin-bottom: 2.4rem;
+    @apply hidden;
+    @screen md {
+        @apply block;
+        padding-bottom: 0.8rem;
         @screen lg {
-            margin-bottom: 0;
+            @apply flex justify-between items-center;
         }
-        li {
-            &:not(:last-child) {
-                margin-right: 2.4rem;
-                @screen lg {
-                    margin-right: 4rem;
+        .menu {
+            @apply flex items-center list-none;
+            margin-bottom: 2.4rem;
+            @screen lg {
+                margin-bottom: 0;
+            }
+            li {
+                &:not(:last-child) {
+                    margin-right: 2.4rem;
+                    @screen lg {
+                        margin-right: 4rem;
+                    }
+                }
+                a {
+                    @appy no-underline;
+                }
+                &:hover {
+                    @apply text-primary;
                 }
-            }
-            a {
-                @appy no-underline;
-            }
-            &:hover {
-                @apply text-primary;
             }
         }
     }