🎨 styles: fix header animation

:%s

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}

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;

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 {

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 />

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 {