63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Header from "@/components/layoutPanel/header";
|
|
import Sidebar from "@/components/layoutPanel/sidebar";
|
|
import Information from "@/data/information.json";
|
|
import UserDetail from "@/components/layoutPanel/userDetail";
|
|
import { usePathname } from "next/navigation";
|
|
import BgGray from "@/components/layoutPanel/sidebar/BgGray";
|
|
|
|
function Content({ children }) {
|
|
const pathname = usePathname();
|
|
const [active, setActive] = useState(false);
|
|
const [open, setOpen] = useState(true);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 2000);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex min-h-screen dark:bg-[#1F1D2B]">
|
|
<Sidebar
|
|
open={open}
|
|
active={active}
|
|
setOpen={setOpen}
|
|
setActive={setActive}
|
|
/>
|
|
<BgGray isActive={active} setIsActive={setActive} />
|
|
<main
|
|
className={`
|
|
w-full transition-all duration-500 dark:bg-[#1F1D2B]
|
|
${
|
|
pathname.includes("dashboard")
|
|
? open
|
|
? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
|
|
: "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
|
|
: open
|
|
? "md:w-[calc(100%-243px)]"
|
|
: "md:w-[calc(100%-96px)]"
|
|
}
|
|
`}
|
|
>
|
|
<Header
|
|
data={Information}
|
|
setActive={setActive}
|
|
disableProfile={pathname.includes("dashboard")}
|
|
/>
|
|
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA] dark:bg-[#1F1D2B]">
|
|
{children}
|
|
</section>
|
|
</main>
|
|
{pathname.includes("dashboard") && (
|
|
<UserDetail data={Information} loading={loading} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Content;
|