refactor: update sidebar collapsed state to false in mobile

src/hooks/use-is-collapsed.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react'
+import useLocalStorage from './use-local-storage'
+
+export default function useIsCollapsed() {
+  const [isCollapsed, setIsCollapsed] = useLocalStorage({
+    key: 'collapsed-sidebar',
+    defaultValue: false,
+  })
+
+  useEffect(() => {
+    const handleResize = () => {
+      // Update isCollapsed based on window.innerWidth
+      setIsCollapsed(window.innerWidth < 768 ? false : isCollapsed)
+    }
+
+    // Initial setup
+    handleResize()
+
+    // Add event listener for window resize
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [isCollapsed, setIsCollapsed])
+
+  return [isCollapsed, setIsCollapsed] as const
+}

src/pages/dashboard/index.tsx

@@ -1,25 +1,16 @@
 import Sidebar from '@/components/sidebar'
 import MainPanel from './main-panel'
-import useLocalStorage from '@/hooks/use-local-storage'
+import useIsCollapsed from '@/hooks/use-is-collapsed'
 
 export default function Dashboard() {
-  const [isCollapsed, setIsCollapsed] = useLocalStorage({
-    key: 'collapsed-sidebar',
-    defaultValue: false,
-  })
+  const [isCollapsed, setIsCollapsed] = useIsCollapsed()
 
   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='bg-background'>
+      <div className='flex flex-col md:flex-row'>
+        <Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
+        <div className={`h-svh flex-1`}>
+          <MainPanel />
         </div>
       </div>
     </div>