From 985f8861c802fd0a9f79fc48a780ace19706d977 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 9 Sep 2021 14:33:52 +0700 Subject: [PATCH] :bug: bug: fix header animation :%s --- .../common/Header/Header.module.scss | 21 ++++++++- src/components/common/Header/Header.tsx | 44 ++++++++++++------- .../HeaderHighLight.module.scss | 42 ++++++------------ .../HeaderHighLight/HeaderHighLight.tsx | 12 ++--- .../HeaderMenu/HeaderMenu.module.scss | 4 ++ .../HeaderSubMenu/HeaderSubMenu.tsx | 8 +--- 6 files changed, 71 insertions(+), 60 deletions(-) diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss index 3e40e067d..15bcd9b72 100644 --- a/src/components/common/Header/Header.module.scss +++ b/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; +// } +// } + diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index a9926f765..588bf68d1 100644 --- a/src/components/common/Header/Header.tsx +++ b/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(null) const [isFullHeader, setIsFullHeader] = useState(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 ( <> -
- +
+
- +
+
+ +
+ - + ) }) diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss index 9717fd29d..77e6aee82 100644 --- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss +++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss @@ -3,37 +3,21 @@ .headerHighLight { @apply hidden; @screen md { - 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; - } + @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: 0.8rem 0; + li { + &:not(:last-child) { + margin-right: 3.2rem; + } + a { + @appy no-underline; } } } } } - -@keyframes showHeaderHightlight { - 0% { - transform: translateY(-4rem); - } - 100% { - transform: none; - } -} diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx index a1759eede..d0d4eede7 100644 --- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx +++ b/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 { - children?: any, - isShow: boolean, -} - -const HeaderHighLight = memo(({ isShow }: Props) => { +const HeaderHighLight = memo(() => { return ( -
+
Free Shipping on order $49+ / Express $99+
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss index eaaabca70..8327f5523 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss +++ b/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); diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx index 6a02259b5..eb7d0a18a 100644 --- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx +++ b/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 ( -
+
    {/* todo: handle active item */}