mirror of
https://github.com/vercel/commerce.git
synced 2025-07-28 04:31:22 +00:00
.github
.vscode
packages
site
assets
components
auth
cart
checkout
common
Avatar
FeatureBar
Footer
Head
HomeAllProductsGrid
I18nWidget
Layout
Navbar
Navbar.module.css
Navbar.tsx
NavbarRoot.tsx
index.ts
SEO
Searchbar
SidebarLayout
UserNav
index.ts
icons
product
ui
wishlist
search.tsx
config
lib
pages
public
.env.template
.eslintrc
.gitignore
.prettierignore
.prettierrc
commerce-config.js
commerce.config.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
README.md
license.md
package.json
turbo.json
yarn.lock
34 lines
818 B
TypeScript
34 lines
818 B
TypeScript
import { FC, useState, useEffect } from 'react'
|
|
import throttle from 'lodash.throttle'
|
|
import cn from 'clsx'
|
|
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
|