Keep panel state

README.md

@@ -4,6 +4,10 @@ Simple example app using Nextjs and Twind (JIT Tailwind lib).
 
 Creates a gorcery shop with some products, cart, favorites and orders history.
 
+## Live
+
+Use the live version at: https://next-groceries-gamma.vercel.app/
+
 **Install**
 
 ```

components/Header/TogglePanel.tsx

@@ -1,6 +1,7 @@
 import { panelAtom } from 'components/Panel/Panel'
 import { useAtom } from 'jotai'
 import { tw } from 'twind'
+import { useIsClient } from 'utils/client'
 import { linkStyle } from './NavLink'
 
 export type TogglePanelProps = {
@@ -10,9 +11,12 @@ export type TogglePanelProps = {
 
 export default function TogglePanel({ label, icon: Icon }: TogglePanelProps) {
   const [isOpen, setIsOpen] = useAtom(panelAtom)
+  const { key } = useIsClient()
 
   return (
     <button
+      key={key}
+      suppressHydrationWarning
       type="button"
       className={tw`${linkStyle} hidden md:flex focus:outline-none ${
         isOpen && 'bg-blue-200'

components/Panel/Panel.tsx

@@ -1,7 +1,9 @@
 import { tw } from 'twind'
 import { css } from 'twind/css'
 import { mainHeight } from 'styles'
-import { atom, useAtom } from 'jotai'
+import { useAtom } from 'jotai'
+import { atomWithLocalStorage } from 'utils/atom'
+import { useIsClient } from 'utils/client'
 
 type PanelProps = {
   children: React.ReactNode
@@ -12,12 +14,16 @@ const hideScrollBar = css({
   '-webkit-scrollbar': { width: 'thin' },
 })
 
-export const panelAtom = atom(false)
+export const panelAtom = atomWithLocalStorage<boolean>('Panel', false)
 
 export default function Panel({ children }: PanelProps) {
   const [isOpen] = useAtom(panelAtom)
+  const { key } = useIsClient()
+
   return (
     <div
+      key={key}
+      suppressHydrationWarning
       className={tw`${
         isOpen && 'md:block'
       } bg-white hidden w-full max-w-sm relative`}

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@twind/line-clamp": "^0.1.1",
+    "@twind/next": "^1.0.7",
     "immer": "^9.0.2",
     "jotai": "^0.16.5",
     "nanoid": "^3.1.23",

pages/_app.tsx

@@ -7,6 +7,7 @@ import Head from 'next/head'
 import Header from 'components/Header'
 import ScrollWatcher from 'components/ScrollWatcher'
 import Toaster from 'components/Toaster'
+import withTwindApp from '@twind/next/app'
 
 if (process.env.NODE_ENV === 'development') {
   import('twind/shim')
@@ -32,4 +33,4 @@ function App({ Component, pageProps }: AppProps) {
   )
 }
 
-export default App
+export default withTwindApp(App)

utils/client.ts

@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react'
+
+export const useIsClient = () => {
+  const [isClient, setClient] = useState(false)
+  const key = isClient ? 'client' : 'server'
+
+  useEffect(() => {
+    setClient(true)
+  }, [])
+
+  return { isClient, key }
+}

yarn.lock

@@ -699,6 +699,11 @@
   resolved "https://registry.yarnpkg.com/@twind/line-clamp/-/line-clamp-0.1.1.tgz#34c82fbb89864a24bc3f603b47d6b5ad48a669ed"
   integrity sha512-OAbGo1traJ5KmTSlIGPAAg8RnQx3XCGriKyPJA2L6yuO0bO1DwDm6oIAAYuLuV792NDyfWeZNcwKUfBXWSnDVQ==
 
+"@twind/next@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@twind/next/-/next-1.0.7.tgz#d3900261bd0fe0ad102ddec2ca2d9b8e2d6c08e4"
+  integrity sha512-hEVsZJK0t1FH44TH0Al7GLXXaEW8H35DgCIu69ndI5ltAFOTyZ8ioqBbx+EiedU9cBQ66iA5QdahxuFdj6XoXA==
+
 "@types/aria-query@^4.2.0":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"