🐛 bug: fix header animation

:%s

src/components/common/Header/Header.module.scss

@@ -4,7 +4,7 @@
   @apply sticky bg-white shadow-md;
   top: 0;
   z-index: 9999;
-  margin-bottom: 3.2rem;  
+  margin-bottom: 3.2rem;
   &.full {
     @apply shadow-none;
     border: 1px solid var(--border-line);
@@ -17,3 +17,22 @@
     @apply font-logo;
   }
 }
+
+.headerSticky {
+  position: sticky;
+  top: 0;
+  display: none;
+  &.show {
+    display: block;
+  }
+}
+
+// @keyframes showHeaderHightlight {
+//   0% {
+//       transform: translateY(-4rem);
+//   }
+//   100% {
+//       transform: none;
+//   }
+// }
+

src/components/common/Header/Header.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React, { memo, useEffect, useState } from 'react'
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useModalCommon } from 'src/components/hooks'
 import { isMobile } from 'src/utils/funtion.utils'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
@@ -12,40 +12,54 @@ import s from './Header.module.scss'
 
 
 const Header = memo(() => {
+    const headeFullRef = useRef<HTMLDivElement>(null)
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
     const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
     const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
 
+    const headerHeight = useMemo(() => {
+        return headeFullRef.current?.offsetHeight
+    }, [headeFullRef])
+
     useEffect(() => {
+        const handleScroll = () => {
+            if (!isMobile()) {
+                if (!headerHeight || window.scrollY > headerHeight) {
+                    setIsFullHeader(false)
+                } else {
+                    setIsFullHeader(true)
+                }
+            }
+        }
         window.addEventListener('scroll', handleScroll)
         return () => {
             window.removeEventListener('scroll', handleScroll)
         }
-    }, [])
+    }, [headerHeight])
 
-    const handleScroll = () => {
-        if (!isMobile()) {
-            if (window.scrollY === 0) {
-                setIsFullHeader(true)
-            } else {
-                setIsFullHeader(false)
-            }
-        }
-    }
     return (
         <>
-            <header className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
+            <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
-                <HeaderHighLight isShow={isFullHeader} />
+                <HeaderHighLight />
                 <div className={s.menu}>
                     <HeaderMenu isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
-                    <HeaderSubMenu isShow={isFullHeader} />
+                    <HeaderSubMenu/>
                 </div>
             </header>
+            <div className={classNames({
+                headerSticky: true,
+                show: !isFullHeader
+            })}>
+                <HeaderMenu isFull={isFullHeader}
+                    openModalAuthen={openModalAuthen}
+                    openModalInfo={openModalInfo} />
+            </div>
+
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
-            <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo}/>
+            <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
         </>
     )
 })

src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss

@@ -3,37 +3,21 @@
 .headerHighLight {
     @apply hidden;
     @screen md {
-        transform: translateY(-10rem);
+        @apply flex justify-between items-center spacing-horizontal bg-primary caption;
-        height: 0;
+        padding-top: 0.8rem;
-        &.show {
+        padding-bottom: 0.8rem;
-            @apply flex justify-between items-center spacing-horizontal bg-primary caption;
+        color: var(--white);
-            animation: showHeaderHightlight 0.2s;
+        .menu {
-            height: unset;
+            @apply flex items-center list-none;
-            transform: none;
+            padding: 0.8rem 0;
-            padding-top: 0.8rem;
+            li {
-            padding-bottom: 0.8rem;
+                &:not(:last-child) {
-            color: var(--white);
+                    margin-right: 3.2rem;
-            .menu {
+                }
-                @apply flex items-center list-none;
+                a {
-                padding: 0.8rem 0;
+                    @appy no-underline;
-                li {
-                    &:not(:last-child) {
-                        margin-right: 3.2rem;
-                    }
-                    a {
-                        @appy no-underline;
-                    }
                 }
             }
         }
     }
 }
-
-@keyframes showHeaderHightlight {
-    0% {
-        transform: translateY(-4rem);
-    }
-    100% {
-        transform: none;
-    }
-}

src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx

@@ -1,6 +1,5 @@
-import classNames from 'classnames'
 import Link from 'next/link'
-import { memo, useEffect, useRef } from 'react'
+import { memo } from 'react'
 import { ROUTE } from 'src/utils/constanst.utils'
 import s from './HeaderHighLight.module.scss'
 
@@ -19,14 +18,9 @@ const MENU = [
     },
 ]
 
-interface Props {
+const HeaderHighLight = memo(() => {
-    children?: any,
-    isShow: boolean,
-}
-
-const HeaderHighLight = memo(({ isShow }: Props) => {
     return (
-        <section className={classNames({ [s.headerHighLight]: true, [s.show]: isShow })}>
+        <section className={s.headerHighLight}>
             <div>
                 Free Shipping on order $49+ / Express $99+
             </div>

src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss

@@ -62,6 +62,10 @@
                     }
                 }
                 .btnCart {
+                    all: unset;
+                    &:focus-visible {
+                        outline: 2px solid #000;
+                    }
                     &:hover {
                         svg path {
                             fill: var(--primary);

src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx

@@ -53,16 +53,12 @@ const CATEGORY = [
         link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
     },
 ]
-interface Props {
-    children?: any,
-    isShow: boolean,
-}
 
-const HeaderSubMenu = memo(({ isShow }: Props) => {
+const HeaderSubMenu = memo(() => {
     const router = useRouter()
 
     return (
-        <section className={classNames({ [s.headerSubMenu]: true, [s.show]: isShow })}>
+        <section className={s.headerSubMenu}>
             <ul className={s.menu}>
                 {/* todo: handle active item */}
                 <li>