✨ feat: product lisT

:%s

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'
@@ -9,43 +9,64 @@ import HeaderMenu from './components/HeaderMenu/HeaderMenu'
 import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
 import s from './Header.module.scss'
+interface props {
+    toggleFilter:()=>void
+}
 
-
-const Header = memo(() => {
+const Header = memo(({toggleFilter}:props) => {
+    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.current])
+
     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 })}>
-                <HeaderHighLight isShow={isFullHeader} />
+            <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
+                <HeaderHighLight />
                 <div className={s.menu}>
-                    <HeaderMenu isFull={isFullHeader}
+                    <HeaderMenu
+                        toggleFilter={toggleFilter}
+                        isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
-                    <HeaderSubMenu isShow={isFullHeader} />
+                    <HeaderSubMenu />
                 </div>
             </header>
+
+
+            <div className={classNames({
+                [s.headerSticky]: true,
+                [s.show]: !isFullHeader
+            })}>
+                <HeaderMenu isFull={isFullHeader}
+                    toggleFilter={toggleFilter}
+                    openModalAuthen={openModalAuthen}
+                    openModalInfo={openModalInfo} />
+            </div>
+
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
-            <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo}/>
+            <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
         </>
     )
 })