Sidebar mobile friendly

src/components/dashboard/DashboardLayout.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { DashboardSidebar } from "./DashboardSidebar";
 import { DashboardHeader } from "./DashboardHeader";
+import { SidebarProvider } from "../ui/sidebar";
 
 interface DashboardLayoutProps {
   children: ReactNode;
@@ -8,16 +9,18 @@ interface DashboardLayoutProps {
   subtitle?: string;
 }
 
-export function DashboardLayout({ children, title, subtitle }: DashboardLayoutProps) {
+export function DashboardLayout({
+  children,
+  title,
+  subtitle,
+}: DashboardLayoutProps) {
   return (
-    <div className="flex h-screen w-full bg-background">
+    <SidebarProvider>
       <DashboardSidebar />
       <div className="flex-1 flex flex-col overflow-hidden">
         <DashboardHeader title={title} subtitle={subtitle} />
-        <main className="flex-1 overflow-auto p-6">
-          {children}
-        </main>
+        <main className="flex-1 overflow-auto p-6">{children}</main>
       </div>
-    </div>
+    </SidebarProvider>
   );
 }