mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
🎨 styles: header mobile animation
:%s
This commit is contained in:
lytrankieio123
parent
bd02bff282
commit
3641ffa6e7
3
next-env.d.ts
vendored
3
next-env.d.ts
vendored
@ -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.
|
||||
|
||||
@ -12,10 +12,10 @@ import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuM
|
||||
import s from './Header.module.scss'
|
||||
interface props {
|
||||
toggleFilter: () => void,
|
||||
visibleFilter:boolean
|
||||
visibleFilter: boolean
|
||||
}
|
||||
|
||||
const Header = memo(({ toggleFilter,visibleFilter }: props) => {
|
||||
const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
||||
const headeFullRef = useRef<HTMLDivElement>(null)
|
||||
const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
|
||||
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
|
||||
@ -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) {
|
||||
setIsFullHeader(false)
|
||||
} else {
|
||||
setIsFullHeader(true)
|
||||
}
|
||||
if (!headeFullRef.current || window.scrollY > headeFullRef.current?.offsetHeight) {
|
||||
setIsFullHeader(false)
|
||||
} else {
|
||||
setIsFullHeader(true)
|
||||
}
|
||||
// if (!isMobile()) {
|
||||
// } else {
|
||||
// setIsFullHeader(true)
|
||||
// }
|
||||
}
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
}
|
||||
}, [headerHeight])
|
||||
}, [headeFullRef.current])
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -59,16 +55,18 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
|
||||
[s.show]: !isFullHeader
|
||||
})}>
|
||||
<HeaderMenu
|
||||
isStickyHeader={true}
|
||||
toggleFilter={toggleFilter}
|
||||
toggleCart={toggleCart}
|
||||
openModalAuthen={openModalAuthen}
|
||||
openModalInfo={openModalInfo} />
|
||||
</div>
|
||||
|
||||
|
||||
<header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
|
||||
<HeaderHighLight />
|
||||
<div className={s.menu}>
|
||||
<HeaderMenu
|
||||
isFull={isFullHeader}
|
||||
visibleFilter={visibleFilter}
|
||||
toggleFilter={toggleFilter}
|
||||
toggleCart={toggleCart}
|
||||
|
||||
@ -1,25 +1,46 @@
|
||||
@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;
|
||||
.iconGroup{
|
||||
margin-bottom: 2rem;
|
||||
@screen md {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.iconGroup {
|
||||
@apply flex justify-between items-center;
|
||||
}
|
||||
.iconCart {
|
||||
margin-left: 1.6rem;
|
||||
}
|
||||
.iconFilter{
|
||||
.iconFilter {
|
||||
@apply relative;
|
||||
.dot{
|
||||
.dot {
|
||||
@apply absolute;
|
||||
top: -0.08rem;
|
||||
right: -0.2rem;
|
||||
@ -28,7 +49,7 @@
|
||||
height: 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
@apply hidden;
|
||||
&.isShow{
|
||||
&.isShow {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
@ -36,13 +57,24 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.inputSearch {
|
||||
margin-top: 2.4rem;
|
||||
.searchWrap {
|
||||
@apply flex items-center;
|
||||
.inputSearch {
|
||||
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 {
|
||||
@ -98,7 +126,7 @@
|
||||
}
|
||||
@screen xl {
|
||||
.iconFilterDesk {
|
||||
display:none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,8 +11,9 @@ import Logo from '../../../Logo/Logo'
|
||||
import s from './HeaderMenu.module.scss'
|
||||
interface Props {
|
||||
children?: any,
|
||||
isFull: boolean,
|
||||
visibleFilter?:boolean,
|
||||
isFull?: boolean,
|
||||
isStickyHeader?: boolean,
|
||||
visibleFilter?: boolean,
|
||||
openModalAuthen: () => void,
|
||||
openModalInfo: () => void,
|
||||
toggleFilter: () => 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 />
|
||||
@ -64,8 +70,8 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
|
||||
{
|
||||
FILTER_PAGE.includes(router.pathname) && (
|
||||
<button className={s.iconFilter} onClick={toggleFilter}>
|
||||
<IconFilter/>
|
||||
<div className={classNames({[s.dot]:true,[s.isShow]:visibleFilter})}></div>
|
||||
<IconFilter />
|
||||
<div className={classNames({ [s.dot]: true, [s.isShow]: visibleFilter })}></div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@ -75,8 +81,13 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className={s.inputSearch}>
|
||||
<InputSearch />
|
||||
<div className={s.searchWrap}>
|
||||
<div className={s.inputSearch}>
|
||||
<InputSearch />
|
||||
</div>
|
||||
<div className={s.buttonSearch}>
|
||||
<ButtonCommon>Search</ButtonCommon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul className={s.menu}>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -122,7 +122,7 @@ module.exports = {
|
||||
'xl': '1280px',
|
||||
// => @media (min-width: 1280px) { ... }
|
||||
|
||||
'2xl': '1536px',
|
||||
'2xl': '1440px',
|
||||
// => @media (min-width: 1536px) { ... }
|
||||
},
|
||||
caroucel: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user