crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 bug: fix header animation

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-10 11:37:17 +07:00
parent 14dd99c051
commit e6d8d42ede
3 changed files with 54 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,14 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.header { .header {
@apply sticky bg-white shadow-md; @apply sticky bg-white;
top: 0; top: 0;
left: 0;
z-index: 9999; z-index: 9999;
margin-bottom: 3.2rem; margin-bottom: 3.2rem;
@screen md {
@apply relative;
}
&.full { &.full {
@apply shadow-none; @apply shadow-none;
border: 1px solid var(--border-line); border: 1px solid var(--border-line);
@@ -19,20 +23,25 @@
} }
.headerSticky { .headerSticky {
position: sticky; @apply sticky bg-white shadow-md;
top: 0;
display: none; display: none;
padding-left: 3.2rem;
padding-right: 3.2rem;
top: 0;
left: 0;
z-index: 10000;
transition: all 0.2s;
&.show { &.show {
display: block; display: block;
animation: showHeaderSticky 0.2s;
} }
} }
// @keyframes showHeaderHightlight { @keyframes showHeaderSticky {
// 0% { 0% {
// transform: translateY(-4rem); transform: translateY(-7rem);
// } }
// 100% { 100% {
// transform: none; transform: none;
// } }
// } }

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

@@ -19,7 +19,7 @@ const Header = memo(() => {
const headerHeight = useMemo(() => { const headerHeight = useMemo(() => {
return headeFullRef.current?.offsetHeight return headeFullRef.current?.offsetHeight
}, [headeFullRef]) }, [headeFullRef.current])
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@@ -42,15 +42,18 @@ const Header = memo(() => {
<header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}> <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
<HeaderHighLight /> <HeaderHighLight />
<div className={s.menu}> <div className={s.menu}>
<HeaderMenu isFull={isFullHeader} <HeaderMenu
isFull={isFullHeader}
openModalAuthen={openModalAuthen} openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} /> openModalInfo={openModalInfo} />
<HeaderSubMenu/> <HeaderSubMenu />
</div> </div>
</header> </header>
<div className={classNames({ <div className={classNames({
headerSticky: true, [s.headerSticky]: true,
show: !isFullHeader [s.show]: !isFullHeader
})}> })}>
<HeaderMenu isFull={isFullHeader} <HeaderMenu isFull={isFullHeader}
openModalAuthen={openModalAuthen} openModalAuthen={openModalAuthen}

54
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
View File

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