实现响应式导航栏组件

src/lib/stores/client.ts

@@ -0,0 +1,46 @@
+import {createStore} from 'zustand/vanilla'
+import {persist} from 'zustand/middleware'
+
+export type ClientStore = ClientState & ClientActions
+
+type Point = 'sm' | 'md' | 'lg' | 'xl'
+
+export type ClientState = {
+  breakpoint: {
+    sm: boolean
+    md: boolean
+    lg: boolean
+    xl: boolean
+  }
+}
+
+export type ClientActions = {
+  setBreakpoints: (breakpoints: Partial<ClientState['breakpoint']>) => void
+}
+
+export const createClientStore = () => {
+  return createStore<ClientStore>()(persist(
+    setState => ({
+      breakpoint: {
+        sm: false,
+        md: false,
+        lg: false,
+        xl: false,
+      },
+
+      setBreakpoints: breakpoints => setState(state => ({
+        breakpoint: {
+          ...state.breakpoint,
+          ...breakpoints,
+        },
+      })),
+    }),
+
+    {
+      name: 'client-store',
+      partialize: state => ({
+        device: state.breakpoint,
+      }),
+    },
+  ))
+}

src/lib/stores/layout.ts

@@ -1,4 +1,5 @@
 import {createStore} from 'zustand/vanilla'
+import {persist} from 'zustand/middleware'
 
 export type LayoutStore = LayoutState & LayoutActions
 
@@ -11,14 +12,25 @@ export type LayoutActions = {
   setNavbar: (navbar: boolean) => void
 }
 
-export const createLayoutStore = (open: boolean) => {
-  return createStore<LayoutStore>()(setState => ({
-    navbar: open,
-    toggleNavbar: () => setState((state) => {
-      return {navbar: !state.navbar}
+export const createLayoutStore = () => {
+  return createStore<LayoutStore>()(persist(
+    setState => ({
+      navbar: false,
+
+      toggleNavbar: () => setState((state) => {
+        return {navbar: !state.navbar}
+      }),
+
+      setNavbar: navbar => setState((_) => {
+        return {navbar}
+      }),
     }),
-    setNavbar: navbar => setState((_) => {
-      return {navbar}
-    }),
-  }))
+
+    {
+      name: 'layout-store',
+      partialize: state => ({
+        navbar: state.navbar,
+      }),
+    },
+  ))
 }