Initial commit

src/shared/components/layouts/DashboardLayout.js

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import Sidebar from "../Sidebar";
+import Header from "../Header";
+
+export default function DashboardLayout({ children }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="flex h-screen w-full overflow-hidden bg-bg">
+      {/* Mobile sidebar overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar - Desktop */}
+      <div className="hidden lg:flex">
+        <Sidebar />
+      </div>
+
+      {/* Sidebar - Mobile */}
+      <div
+        className={`fixed inset-y-0 left-0 z-50 transform lg:hidden transition-transform duration-300 ease-in-out ${
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <Sidebar onClose={() => setSidebarOpen(false)} />
+      </div>
+
+      {/* Main content */}
+      <main className="flex flex-col flex-1 h-full min-w-0 relative transition-colors duration-300">
+        <Header onMenuClick={() => setSidebarOpen(true)} />
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-6 lg:p-10">
+          <div className="max-w-7xl mx-auto">{children}</div>
+        </div>
+      </main>
+    </div>
+  );
+}