46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client'
|
|
import {ReactNode, useEffect} from 'react'
|
|
import {useClientStore, useLayoutStore} from '@/app/stores'
|
|
|
|
export type EffectProviderProps = {
|
|
children?: ReactNode
|
|
}
|
|
|
|
export default function Effects(props: EffectProviderProps) {
|
|
const setNavbar = useLayoutStore(state => state.setNavbar)
|
|
const setBreakpoints = useClientStore(state => state.setBreakpoints)
|
|
|
|
useEffect(() => {
|
|
const sm = window.matchMedia(`(width >= 40rem)`)
|
|
const md = window.matchMedia(`(width >= 48rem)`)
|
|
const lg = window.matchMedia(`(width >= 64rem)`)
|
|
const xl = window.matchMedia(`(width >= 80rem)`)
|
|
|
|
setNavbar(md.matches)
|
|
setBreakpoints({
|
|
sm: sm.matches,
|
|
md: md.matches,
|
|
lg: lg.matches,
|
|
xl: xl.matches,
|
|
})
|
|
|
|
sm.addEventListener('change', (e) => {
|
|
setBreakpoints({sm: e.matches})
|
|
})
|
|
|
|
md.addEventListener('change', (e) => {
|
|
setBreakpoints({md: e.matches})
|
|
})
|
|
|
|
lg.addEventListener('change', (e) => {
|
|
setBreakpoints({lg: e.matches})
|
|
})
|
|
|
|
xl.addEventListener('change', (e) => {
|
|
setBreakpoints({xl: e.matches})
|
|
})
|
|
}, [setBreakpoints, setNavbar])
|
|
|
|
return props.children
|
|
}
|