crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 11:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 bug: fix header animation

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-09 14:33:52 +07:00
parent 4f905b1558
commit 985f8861c8
6 changed files with 71 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/common/Header/Header.module.scss
View File

@ -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;
// }
// }

44
src/components/common/Header/Header.tsx
View File

@ -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<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])
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}
openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} />
<HeaderSubMenu isShow={isFullHeader} />
<HeaderSubMenu/>
</div>
</header>
<div className={classNames({
headerSticky: true,
show: !isFullHeader
})}>
<HeaderMenu isFull={isFullHeader}
openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} />
</div>
<HeaderSubMenuMobile />
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo}/>
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
</>
)
})

42
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
View File

@ -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;
}
}

12
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
View File

@ -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 (
<section className={classNames({ [s.headerHighLight]: true, [s.show]: isShow })}>
<section className={s.headerHighLight}>
<div>
Free Shipping on order $49+ / Express $99+
</div>

4
src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
View File

@ -62,6 +62,10 @@
}
}
.btnCart {
all: unset;
&:focus-visible {
outline: 2px solid #000;
}
&:hover {
svg path {
fill: var(--primary);

8
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
View File

@ -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 (
<section className={classNames({ [s.headerSubMenu]: true, [s.show]: isShow })}>
<section className={s.headerSubMenu}>
<ul className={s.menu}>
{/* todo: handle active item */}
<li>