实现响应式导航栏组件

src/app/effects.tsx

@@ -0,0 +1,45 @@
+'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
+}