feat: make sidebar collapsed state in local storage

src/hooks/use-local-storage.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+interface LocalStorageProps<T> {
+  key: string
+  defaultValue: T
+}
+
+export default function useLocalStorage<T>({
+  key,
+  defaultValue,
+}: LocalStorageProps<T>) {
+  const [value, setValue] = useState<T>(() => {
+    const storedValue = localStorage.getItem(key)
+    return storedValue !== null ? (JSON.parse(storedValue) as T) : defaultValue
+  })
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value))
+  }, [value, key])
+
+  return [value, setValue] as const
+}

src/pages/dashboard/index.tsx

@@ -1,27 +1,27 @@
 import Sidebar from '@/components/sidebar'
-import { useState } from 'react'
 import MainPanel from './main-panel'
+import useLocalStorage from '@/hooks/use-local-storage'
 
 export default function Dashboard() {
-  const defaultCollapsed = false
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed)
+  const [isCollapsed, setIsCollapsed] = useLocalStorage({
+    key: 'collapsed-sidebar',
+    defaultValue: false,
+  })
 
   return (
-    <>
-      <div className='hidden md:block'>
-        <div className='bg-background'>
-          <div className='flex'>
-            <Sidebar
-              isCollapsed={isCollapsed}
-              setIsCollapsed={setIsCollapsed}
-              className={isCollapsed ? 'w-14' : 'w-64'}
-            />
-            <div className={`flex-1 h-svh`}>
-              <MainPanel />
-            </div>
+    <div className='hidden md:block'>
+      <div className='bg-background'>
+        <div className='flex'>
+          <Sidebar
+            isCollapsed={isCollapsed}
+            setIsCollapsed={setIsCollapsed}
+            className={isCollapsed ? 'w-14' : 'w-64'}
+          />
+          <div className={`flex-1 h-svh`}>
+            <MainPanel />
           </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }