Integrated a from ai generated dashboard

app/(backend)/layout.tsx

@@ -1,14 +1,31 @@
-import Header from "@/components/Header";
+"use client";
 
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <main className="min-h-screen text-gray-400">
-        <Header />
-        <div className="container py-10">
-            {children}
-        </div>
-    </main>
-  )
+import Header from "@/components/Header/index";
+import Sidebar from "@/components/Sidebar";
+import React, { useState } from "react";
+
+interface LayoutProps {
+  children: React.ReactNode;
 }
 
-export default Layout;
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div data-cmp="DashboardLayout" className="min-h-screen bg-muted/30">
+      <Sidebar />
+
+      {/* Mobile Sidebar Overlay */}
+      {sidebarOpen && (
+        <div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setSidebarOpen(false)} />
+      )}
+
+      <div className={`md:pl-64 flex flex-col min-h-screen transition-all duration-300`}>
+        <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+        <main className="flex-1 p-4 md:p-8 animate-in fade-in duration-500">{children}</main>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;