From b3b5a310d8a044c5874ec329ff533e868193023c Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:13:51 +0700
Subject: [PATCH] :art: styles: fix header animation

:%s
---
 src/components/common/Header/Header.tsx                      | 3 +--
 .../components/HeaderHighLight/HeaderHighLight.module.scss   | 1 +
 .../Header/components/HeaderMenu/HeaderMenu.module.scss      | 4 ----
 .../common/Header/components/HeaderMenu/HeaderMenu.tsx       | 5 ++---
 .../components/HeaderSubMenu/HeaderSubMenu.module.scss       | 1 +
 5 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 7aad47d71..1638b6571 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -59,7 +59,6 @@ const Header = memo(({ toggleFilter }: props) => {
                     <HeaderMenu
                         toggleFilter={toggleFilter}
                         toggleCart={toggleCart}
-                        isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
                     <HeaderSubMenu />
@@ -71,7 +70,7 @@ const Header = memo(({ toggleFilter }: props) => {
                 [s.headerSticky]: true,
                 [s.show]: !isFullHeader
             })}>
-                <HeaderMenu isFull={isFullHeader}
+                <HeaderMenu
                     toggleFilter={toggleFilter}
                     toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
index 77e6aee82..2db143931 100644
--- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
@@ -7,6 +7,7 @@
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
         color: var(--white);
+        margin-bottom: 1.6rem;
         .menu {
             @apply flex items-center list-none;
             padding: 0.8rem 0;
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index 62932206f..0c1282bd3 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -7,10 +7,6 @@
         @apply flex justify-between items-center;
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
-        &.full {
-            padding-top: 2.4rem;
-            padding-bottom: 2.4rem;
-        }
     }
     .left {
         .top {
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 293d556fe..4aefb954c 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -10,7 +10,6 @@ import s from './HeaderMenu.module.scss'
 import { useRouter } from 'next/router'
 interface Props {
     children?: any,
-    isFull: boolean,
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter: () => void,
@@ -19,7 +18,7 @@ interface Props {
 
 const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
 
-const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
+const HeaderMenu = memo(({ openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
     const optionMenu = useMemo(() => [
         {
@@ -41,7 +40,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
 
     ], [openModalAuthen])
     return (
-        <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
+        <section className={s.headerMenu}>
             <div className={s.left}>
                 <div className={s.top}>
                     <Logo />
diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
index 3d8016c6b..231ac8300 100644
--- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
+++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
@@ -5,6 +5,7 @@
     @screen md {
         @apply block;
         padding-bottom: 2.4rem;
+        margin-top: 1.6rem;
         transform: none;
         height: unset;
         @screen lg {