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: header mobile animation

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-15 12:52:34 +07:00
parent bd02bff282
commit 3641ffa6e7
7 changed files with 76 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
next-env.d.ts vendored
View File

@ -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.

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

@ -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 (!headerHeight || window.scrollY > headerHeight) {
if (!headeFullRef.current || window.scrollY > headeFullRef.current?.offsetHeight) {
setIsFullHeader(false)
} else {
setIsFullHeader(true)
}
} else {
setIsFullHeader(true)
}
// if (!isMobile()) {
// } 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}

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

@ -1,16 +1,37 @@
@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;
margin-bottom: 2rem;
@screen md {
margin-bottom: 0;
}
.iconGroup {
@apply flex justify-between items-center;
}
@ -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 {

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

@ -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,7 +11,8 @@ import Logo from '../../../Logo/Logo'
import s from './HeaderMenu.module.scss'
interface Props {
children?: any,
isFull: boolean,
isFull?: boolean,
isStickyHeader?: boolean,
visibleFilter?: boolean,
openModalAuthen: () => void,
openModalInfo: () => 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 />
@ -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>

3
src/components/modules/home/HomeBanner/HomeBanner.module.scss
View File

@ -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 {

2
src/styles/_base.scss
View File

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

2
tailwind.config.js
View File

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