design sidebar & head layout & page dashboard

components/layoutPanel/index.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect } from "react";
+import Header from './header';
+import Sidebar from './sidebar';
+import UserDetail from './userDetail';
+
+// AOS
+import Aos from "aos";
+import "aos/dist/aos.css";
+
+function LayoutPanel({ children, data }) {
+
+    useEffect(() => {
+        Aos.init({ duration: 1000 });
+    }, [])
+
+    return (
+        <div className="flex min-h-screen">
+            <Sidebar />
+            <main className="w-full">
+                <Header />
+                <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
+                    {children}
+                </section>
+            </main>
+            <UserDetail data={data} />
+        </div>
+    )
+}
+
+export default LayoutPanel