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

:%s

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

@@ -1,11 +1,11 @@
 @import "../../../styles/utilities";
 
 .header {
-  @apply sticky bg-white;
+  @apply sticky bg-white shadow-md;
   top: 0;
   z-index: 9999;
-  @screen md {
-    padding-bottom: 1.6rem;
+  &.full {
+    @apply shadow-none;
   }
   .menu {
     padding-left: 3.2rem;

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

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

@@ -3,21 +3,37 @@
 .headerHighLight {
     @apply hidden;
     @screen md {
-        @apply flex justify-between items-center spacing-horizontal bg-primary caption;
-        padding-top: 0.8rem;
-        padding-bottom: 0.8rem;
-        color: var(--white);
-        .menu {
-            @apply flex items-center list-none;
-            padding: .8rem 0;
-            li {
-                &:not(:last-child) {
-                    margin-right: 3.2rem;
-                }
-                a {
-                    @appy no-underline;
+        transform: translateY(-10rem);
+        height: 0;
+        &.show {
+            @apply flex justify-between items-center spacing-horizontal bg-primary caption;
+            animation: showHeaderHightlight 0.2s;
+            height: unset;
+            transform: none;
+            padding-top: 0.8rem;
+            padding-bottom: 0.8rem;
+            color: var(--white);
+            .menu {
+                @apply flex items-center list-none;
+                padding: 0.8rem 0;
+                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,5 +1,6 @@
+import classNames from 'classnames'
 import Link from 'next/link'
-import { memo } from 'react'
+import { memo, useEffect, useRef } from 'react'
 import { ROUTE } from 'src/utils/constanst.utils'
 import s from './HeaderHighLight.module.scss'
 
@@ -19,12 +20,13 @@ const MENU = [
 ]
 
 interface Props {
-    children?: any
+    children?: any,
+    isShow: boolean,
 }
 
-const HeaderHighLight = memo(({ }: Props) => {
+const HeaderHighLight = memo(({ isShow }: Props) => {
     return (
-        <section className={s.headerHighLight}>
+        <section className={classNames({ [s.headerHighLight]: true, [s.show]: isShow })}>
             <div>
                 Free Shipping on order $49+ / Express $99+
             </div>

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

@@ -5,8 +5,12 @@
     padding-bottom: 0.8rem;
     @screen md {
         @apply flex justify-between items-center;
-        padding-top: 2.4rem;
-        padding-bottom: 2.4rem;
+        adding-top: 0.8rem;
+        padding-bottom: 0.8rem;
+        &.full {
+            padding-top: 2.4rem;
+            padding-bottom: 2.4rem;
+        }
     }
     .left {
         .top {
@@ -15,8 +19,6 @@
             }
         }
         .inputSearch {
-            //todo: remove
-            border: 1px solid red;
             margin-top: 2.4rem;
             @screen lg {
                 min-width: 51.2rem;
@@ -50,7 +52,13 @@
                 }
                 a {
                     @appy no-underline;
+                    &.iconFovourite {
+                        svg path {
+                            fill: var(--negative);
+                        }
+                    }
                 }
+
             }
         }
     }

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import Link from 'next/link'
 import { memo } from 'react'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
@@ -19,12 +20,13 @@ const OPTION_MENU = [
 ]
 
 interface Props {
-    children?: any
+    children?: any,
+    isFull: boolean,
 }
 
-const HeaderMenu = memo(({ }: Props) => {
+const HeaderMenu = memo(({ isFull }: Props) => {
     return (
-        <section className={s.headerMenu}>
+        <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
             <div className={s.left}>
                 <div className={s.top}>
                     <div>Online Grocery</div>
@@ -46,7 +48,7 @@ const HeaderMenu = memo(({ }: Props) => {
                 </li>
                 <li>
                     <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
-                        <a >
+                        <a className={s.iconFovourite}>
                             <IconHeart />
                         </a>
                     </Link>

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

@@ -3,32 +3,38 @@
 .headerSubMenu {
     @apply hidden;
     @screen md {
-        @apply block;
-        padding-bottom: 0.8rem;
-        @screen lg {
-            @apply flex justify-between items-center;
-        }
-        .menu {
-            @apply flex items-center list-none;
-            margin-bottom: 2.4rem;
+        transform: translateY(-10rem);
+        height: 0;
+        &.show {
+            @apply block;
+            padding-bottom: 2.4rem;
+            transform: none;
+            height: unset;
             @screen lg {
-                margin-bottom: 0;
+                @apply flex justify-between items-center;
             }
-            li {
-                &:not(:last-child) {
-                    margin-right: 2.4rem;
-                    @screen lg {
-                        margin-right: 4rem;
+            .menu {
+                @apply flex items-center list-none;
+                margin-bottom: 2.4rem;
+                @screen lg {
+                    margin-bottom: 0;
+                }
+                li {
+                    &:not(:last-child) {
+                        margin-right: 2.4rem;
+                        @screen lg {
+                            margin-right: 4rem;
+                        }
+                    }
+                    a {
+                        @appy no-underline;
+                    }
+                    &:hover {
+                        @apply text-primary;
+                    }
+                    &.active {
+                        @apply text-primary;
                     }
-                }
-                a {
-                    @appy no-underline;
-                }
-                &:hover {
-                    @apply text-primary;
-                }
-                &.active {
-                    @apply text-primary;
                 }
             }
         }

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

@@ -54,14 +54,15 @@ const CATEGORY = [
     },
 ]
 interface Props {
-    children?: any
+    children?: any,
+    isShow: boolean,
 }
 
-const HeaderSubMenu = memo(({ }: Props) => {
+const HeaderSubMenu = memo(({ isShow }: Props) => {
     const router = useRouter()
 
     return (
-        <section className={s.headerSubMenu}>
+        <section className={classNames({ [s.headerSubMenu]: true, [s.show]: isShow })}>
             <ul className={s.menu}>
                 {/* todo: handle active item */}
                 <li>