🎨 styles: header mobile animation

:%s

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

src/components/common/Header/Header.tsx

@@ -12,10 +12,10 @@ import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuM
 import s from './Header.module.scss'
 interface props {
     toggleFilter: () => void,
-    visibleFilter:boolean
+    visibleFilter: boolean
 }
 
-const Header = memo(({ toggleFilter,visibleFilter }: props) => {
+const Header = memo(({ toggleFilter, visibleFilter }: props) => {
     const headeFullRef = useRef<HTMLDivElement>(null)
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
     const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
@@ -30,27 +30,23 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
         }
     }
 
-    const headerHeight = useMemo(() => {
-        return headeFullRef.current?.offsetHeight
-    }, [headeFullRef.current])
-
     useEffect(() => {
         const handleScroll = () => {
-            if (!isMobile()) {
+            if (!headeFullRef.current || window.scrollY > headeFullRef.current?.offsetHeight) {
-                if (!headerHeight || window.scrollY > headerHeight) {
                 setIsFullHeader(false)
             } else {
                 setIsFullHeader(true)
             }
-            } else {
+            // if (!isMobile()) {
-                setIsFullHeader(true)
+            // } else {
-            }
+            //     setIsFullHeader(true)
+            // }
         }
         window.addEventListener('scroll', handleScroll)
         return () => {
             window.removeEventListener('scroll', handleScroll)
         }
-    }, [headerHeight])
+    }, [headeFullRef.current])
 
     return (
         <>
@@ -59,6 +55,7 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
                 [s.show]: !isFullHeader
             })}>
                 <HeaderMenu
+                    isStickyHeader={true}
                     toggleFilter={toggleFilter}
                     toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
@@ -69,6 +66,7 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
                 <HeaderHighLight />
                 <div className={s.menu}>
                     <HeaderMenu
+                        isFull={isFullHeader}
                         visibleFilter={visibleFilter}
                         toggleFilter={toggleFilter}
                         toggleCart={toggleCart}

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

@@ -1,25 +1,46 @@
 @import "../../../../../styles/utilities";
 
 .headerMenu {
-    padding-top: 1.6rem;
+    @apply hidden;
+    padding-top: 0.8rem;
     padding-bottom: 0.8rem;
+    &.full {
+        @apply flex;
+    }
+    &.small {
+        @apply flex;
+        .left {
+            .top {
+                display: none;
+                @screen md {
+                    display: flex;
+                }
+            }
+        }
+    }
     @screen md {
         @apply flex justify-between items-center;
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
     }
     .left {
+        // margin-bottom: 3.2rem;
+        flex: 1;
         .top {
             @apply flex justify-between items-center;
-            .iconGroup{
+            margin-bottom: 2rem;
+            @screen md {
+                margin-bottom: 0;
+            }
+            .iconGroup {
                 @apply flex justify-between items-center;
             }
             .iconCart {
                 margin-left: 1.6rem;
             }
-            .iconFilter{
+            .iconFilter {
                 @apply relative;
-                .dot{
+                .dot {
                     @apply absolute;
                     top: -0.08rem;
                     right: -0.2rem;
@@ -28,7 +49,7 @@
                     height: 1.2rem;
                     border-radius: 1.2rem;
                     @apply hidden;
-                    &.isShow{
+                    &.isShow {
                         @apply block;
                     }
                 }
@@ -36,13 +57,24 @@
                     display: none;
                 }
             }
-            
         }
+        .searchWrap {
+            @apply flex items-center;
             .inputSearch {
-            margin-top: 2.4rem;
+                flex: 1;
+            }
+            .buttonSearch {
+                margin-left: 1rem;
+            }
+            @screen md {
+                margin: 0 1.6rem 0 4.8rem;
+            }
             @screen lg {
                 min-width: 51.2rem;
                 max-width: 50%;
+                .buttonSearch {
+                    @apply hidden;
+                }
             }
         }
         @screen md {
@@ -52,10 +84,6 @@
                     @apply hidden;
                 }
             }
-            .inputSearch {
-                margin-left: 4.8rem;
-                margin-top: 0;
-            }
         }
     }
     .btnCart {
@@ -98,7 +126,7 @@
         }
         @screen xl {
             .iconFilterDesk {
-                display:none;
+                display: none;
             }
         }
     }

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

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { memo, useMemo } from 'react'
+import { ButtonCommon } from 'src/components/common'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
 import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
@@ -10,8 +11,9 @@ import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
 interface Props {
     children?: any,
-    isFull: boolean,
+    isFull?: boolean,
-    visibleFilter?:boolean,
+    isStickyHeader?: boolean,
+    visibleFilter?: boolean,
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter: () => void,
@@ -20,7 +22,7 @@ interface Props {
 
 const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
 
-const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleFilter, toggleCart}: Props) => {
+const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
 
 
@@ -56,7 +58,11 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
 
     ], [openModalAuthen])
     return (
-        <section className={s.headerMenu}>
+        <section className={classNames({
+            [s.headerMenu]: true,
+            [s.small]: isStickyHeader,
+            [s.full]: isFull,
+        })}>
             <div className={s.left}>
                 <div className={s.top}>
                     <Logo />
@@ -64,8 +70,8 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
                         {
                             FILTER_PAGE.includes(router.pathname) && (
                                 <button className={s.iconFilter} onClick={toggleFilter}>
-                                    <IconFilter/>
+                                    <IconFilter />
-                                    <div className={classNames({[s.dot]:true,[s.isShow]:visibleFilter})}></div>
+                                    <div className={classNames({ [s.dot]: true, [s.isShow]: visibleFilter })}></div>
                                 </button>
                             )
                         }
@@ -75,9 +81,14 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
                     </div>
 
                 </div>
+                <div className={s.searchWrap}>
                     <div className={s.inputSearch}>
                         <InputSearch />
                     </div>
+                    <div className={s.buttonSearch}>
+                        <ButtonCommon>Search</ButtonCommon>
+                    </div>
+                </div>
             </div>
             <ul className={s.menu}>
                 <li>

src/components/modules/home/HomeBanner/HomeBanner.module.scss

@@ -31,13 +31,14 @@
         width: min-content;
 
         color: var(--white);
-        font-size: 7rem;
+        font-size: 7.6rem;
         line-height: 8rem;
         letter-spacing: -0.03em;
         font-weight: bold;
         text-transform: uppercase;
 
         @screen 2xl {
+          font-size: 7.8rem;
           line-height: 8rem;
         }
         &::after {

src/styles/_base.scss

@@ -41,7 +41,7 @@
   --line-height: 2.4rem;
 
   --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
-  --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-heading: "Norquay-bold", "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
   --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
 }
 

tailwind.config.js

@@ -122,7 +122,7 @@ module.exports = {
         'xl': '1280px',
         // => @media (min-width: 1280px) { ... }
 
-        '2xl': '1536px',
+        '2xl': '1440px',
         // => @media (min-width: 1536px) { ... }
       },
       caroucel: {