✨ feat: show/hide full header when scroll in screen md

:%s

src/components/common/Header/Header.tsx

@@ -1,4 +1,6 @@
-import React, { memo } from 'react'
+import classNames from 'classnames'
+import React, { memo, useEffect, useState } from 'react'
+import { isMobile } from 'src/utils/funtion.utils'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
 import HeaderMenu from './components/HeaderMenu/HeaderMenu'
 import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
@@ -11,13 +13,31 @@ interface Props {
 }
 
 const Header = memo(({ }: Props) => {
+    const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll)
+        return () => {
+            window.removeEventListener('scroll', handleScroll)
+        }
+    }, [])
+
+    const handleScroll = () => {
+        if (!isMobile()) {
+            if (window.scrollY === 0) {
+                setIsFullHeader(true)
+            } else {
+                setIsFullHeader(false)
+            }
+        }
+    }
     return (
         <>
-            <header className={s.header}>
-                <HeaderHighLight />
+            <header className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
+                <HeaderHighLight isShow={isFullHeader} />
                 <div className={s.menu}>
-                    <HeaderMenu />
-                    <HeaderSubMenu />
+                    <HeaderMenu isFull={isFullHeader} />
+                    <HeaderSubMenu isShow={isFullHeader} />
                 </div>
             </header>
             <HeaderSubMenuMobile />