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

Improve navbar performance

Browse Source
This commit is contained in:
Luis Alvarez 2021-01-21 10:44:59 -05:00
parent 1db974dabd
commit 2613a5cec7
2 changed files with 70 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,66 +1,47 @@
import { FC, useState, useEffect } from 'react' import { FC } from 'react'
import Link from 'next/link' import Link from 'next/link'
import s from './Navbar.module.css'
import { Logo, Container } from '@components/ui' import { Logo, Container } from '@components/ui'
import { Searchbar, UserNav } from '@components/common' import { Searchbar, UserNav } from '@components/common'
import cn from 'classnames' import NavbarRoot from './NavbarRoot'
import throttle from 'lodash.throttle' import s from './Navbar.module.css'
const Navbar: FC = () => { const Navbar: FC = () => (
const [hasScrolled, setHasScrolled] = useState(false) <NavbarRoot>
<Container>
useEffect(() => { <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
const handleScroll = throttle(() => { <div className="flex items-center flex-1">
const offset = 0 <Link href="/">
const { scrollTop } = document.documentElement <a className={s.logo} aria-label="Logo">
const scrolled = scrollTop > offset <Logo />
setHasScrolled(scrolled) </a>
}, 200) </Link>
<nav className="hidden ml-6 space-x-4 lg:block">
document.addEventListener('scroll', handleScroll) <Link href="/search">
return () => { <a className={s.link}>All</a>
document.removeEventListener('scroll', handleScroll)
}
}, [])
return (
<div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
<Container>
<div className="relative flex flex-row justify-between py-4 align-center md:py-6">
<div className="flex items-center flex-1">
<Link href="/">
<a className={s.logo} aria-label="Logo">
<Logo />
</a>
</Link> </Link>
<nav className="hidden ml-6 space-x-4 lg:block"> <Link href="/search?q=clothes">
<Link href="/search"> <a className={s.link}>Clothes</a>
<a className={s.link}>All</a> </Link>
</Link> <Link href="/search?q=accessories">
<Link href="/search?q=clothes"> <a className={s.link}>Accessories</a>
<a className={s.link}>Clothes</a> </Link>
</Link> </nav>
<Link href="/search?q=accessories">
<a className={s.link}>Accessories</a>
</Link>
</nav>
</div>
<div className="justify-center flex-1 hidden lg:flex">
<Searchbar />
</div>
<div className="flex justify-end flex-1 space-x-8">
<UserNav />
</div>
</div> </div>
<div className="flex pb-4 lg:px-6 lg:hidden"> <div className="justify-center flex-1 hidden lg:flex">
<Searchbar id="mobile-search" /> <Searchbar />
</div> </div>
</Container>
</div> <div className="flex justify-end flex-1 space-x-8">
) <UserNav />
} </div>
</div>
<div className="flex pb-4 lg:px-6 lg:hidden">
<Searchbar id="mobile-search" />
</div>
</Container>
</NavbarRoot>
)
export default Navbar export default Navbar

33
components/common/Navbar/NavbarRoot.tsx Normal file
View File

@ -0,0 +1,33 @@
import { FC, useState, useEffect } from 'react'
import throttle from 'lodash.throttle'
import cn from 'classnames'
import s from './Navbar.module.css'
const NavbarRoot: FC = ({ children }) => {
const [hasScrolled, setHasScrolled] = useState(false)
useEffect(() => {
const handleScroll = throttle(() => {
const offset = 0
const { scrollTop } = document.documentElement
const scrolled = scrollTop > offset
if (hasScrolled !== scrolled) {
setHasScrolled(scrolled)
}
}, 200)
document.addEventListener('scroll', handleScroll)
return () => {
document.removeEventListener('scroll', handleScroll)
}
}, [hasScrolled])
return (
<div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
{children}
</div>
)
}
export default NavbarRoot