Better sidebar ux

src/components/dashboard/DashboardLayout.tsx

@@ -1,7 +1,10 @@
-import { ReactNode } from "react";
+"use client";
+
+import { ReactNode, useEffect, useState } from "react";
 import { DashboardSidebar } from "./DashboardSidebar";
 import { DashboardHeader } from "./DashboardHeader";
 import { SidebarProvider } from "../ui/sidebar";
+import Cookies from "js-cookie";
 
 interface DashboardLayoutProps {
   children: ReactNode;
@@ -14,8 +17,18 @@ export function DashboardLayout({
   title,
   subtitle,
 }: DashboardLayoutProps) {
+  const [mounted, setMounted] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    setSidebarOpen(Cookies.get("sidebar_state") !== "false");
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={sidebarOpen}>
       <DashboardSidebar />
       <div className="flex-1 flex flex-col overflow-hidden">
         <DashboardHeader title={title} subtitle={subtitle} />