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

🎨 styles: fix header animation

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-14 14:13:51 +07:00
parent 083d0f1142
commit b3b5a310d8
5 changed files with 5 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,7 +59,6 @@ const Header = memo(({ toggleFilter }: props) => {
<HeaderMenu <HeaderMenu
toggleFilter={toggleFilter} toggleFilter={toggleFilter}
toggleCart={toggleCart} toggleCart={toggleCart}
isFull={isFullHeader}
openModalAuthen={openModalAuthen} openModalAuthen={openModalAuthen}
openModalInfo={openModalInfo} /> openModalInfo={openModalInfo} />
<HeaderSubMenu /> <HeaderSubMenu />
@ -71,7 +70,7 @@ const Header = memo(({ toggleFilter }: props) => {
[s.headerSticky]: true, [s.headerSticky]: true,
[s.show]: !isFullHeader [s.show]: !isFullHeader
})}> })}>
<HeaderMenu isFull={isFullHeader} <HeaderMenu
toggleFilter={toggleFilter} toggleFilter={toggleFilter}
toggleCart={toggleCart} toggleCart={toggleCart}
openModalAuthen={openModalAuthen} openModalAuthen={openModalAuthen}

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

@ -7,6 +7,7 @@
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
color: var(--white); color: var(--white);
margin-bottom: 1.6rem;
.menu { .menu {
@apply flex items-center list-none; @apply flex items-center list-none;
padding: 0.8rem 0; padding: 0.8rem 0;

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

@ -7,10 +7,6 @@
@apply flex justify-between items-center; @apply flex justify-between items-center;
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
&.full {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
} }
.left { .left {
.top { .top {

5
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@ -10,7 +10,6 @@ import s from './HeaderMenu.module.scss'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
interface Props { interface Props {
children?: any, children?: any,
isFull: boolean,
openModalAuthen: () => void, openModalAuthen: () => void,
openModalInfo: () => void, openModalInfo: () => void,
toggleFilter: () => void, toggleFilter: () => void,
@ -19,7 +18,7 @@ interface Props {
const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS] const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => { const HeaderMenu = memo(({ openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
const router = useRouter() const router = useRouter()
const optionMenu = useMemo(() => [ const optionMenu = useMemo(() => [
{ {
@ -41,7 +40,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
], [openModalAuthen]) ], [openModalAuthen])
return ( return (
<section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}> <section className={s.headerMenu}>
<div className={s.left}> <div className={s.left}>
<div className={s.top}> <div className={s.top}>
<Logo /> <Logo />

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

@ -5,6 +5,7 @@
@screen md { @screen md {
@apply block; @apply block;
padding-bottom: 2.4rem; padding-bottom: 2.4rem;
margin-top: 1.6rem;
transform: none; transform: none;
height: unset; height: unset;
@screen lg { @screen lg {