cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Merge pull request #124 from ollyswanson/navbar-handle-scroll

Browse Source 
Fix handleScroll event handler - Navbar component
This commit is contained in:
B 2020-12-21 14:15:06 -03:00 committed by GitHub
commit 9efb87e91b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/common/Navbar/Navbar.tsx
View File

@ -9,31 +9,31 @@ import throttle from 'lodash.throttle'
const Navbar: FC = () => { const Navbar: FC = () => {
const [hasScrolled, setHasScrolled] = useState(false) const [hasScrolled, setHasScrolled] = useState(false)
const handleScroll = () => {
const offset = 0
const { scrollTop } = document.documentElement
const scrolled = scrollTop > offset
setHasScrolled(scrolled)
}
useEffect(() => { useEffect(() => {
document.addEventListener('scroll', throttle(handleScroll, 200)) const handleScroll = throttle(() => {
const offset = 0
const { scrollTop } = document.documentElement
const scrolled = scrollTop > offset
setHasScrolled(scrolled)
}, 200)
document.addEventListener('scroll', handleScroll)
return () => { return () => {
document.removeEventListener('scroll', handleScroll) document.removeEventListener('scroll', handleScroll)
} }
}, [handleScroll]) }, [])
return ( return (
<div className={cn(s.root, { 'shadow-magical': hasScrolled })}> <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
<Container> <Container>
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative"> <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
<div className="flex flex-1 items-center"> <div className="flex items-center flex-1">
<Link href="/"> <Link href="/">
<a className={s.logo} aria-label="Logo"> <a className={s.logo} aria-label="Logo">
<Logo /> <Logo />
</a> </a>
</Link> </Link>
<nav className="space-x-4 ml-6 hidden lg:block"> <nav className="hidden ml-6 space-x-4 lg:block">
<Link href="/search"> <Link href="/search">
<a className={s.link}>All</a> <a className={s.link}>All</a>
</Link> </Link>
@ -46,11 +46,11 @@ const Navbar: FC = () => {
</nav> </nav>
</div> </div>
<div className="flex-1 justify-center hidden lg:flex"> <div className="justify-center flex-1 hidden lg:flex">
<Searchbar /> <Searchbar />
</div> </div>
<div className="flex flex-1 justify-end space-x-8"> <div className="flex justify-end flex-1 space-x-8">
<UserNav /> <UserNav />
</div> </div>
</div> </div>