web-humas-fe/components/layout/admin-layout.tsx

40 lines
980 B
TypeScript

"use client";
import { useEffect, useState } from "react";
import Sidebar from "./sidebar/sidebar";
import { SidebarProvider } from "./sidebar/sidebar-context";
import { Breadcrumb } from "../ui/breadcrumb";
interface Props {
children: React.ReactNode;
}
export const AdminLayout = ({ children }: Props) => {
const [isOpen, setIsOpen] = useState(true);
const updateSidebarData = (newData: boolean) => {
setIsOpen(newData);
};
const [hasMounted, setHasMounted] = useState(false);
// Hooks
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return (
<SidebarProvider>
<div className="!h-screen flex items-center flex-row !overflow-y-hidden">
<Sidebar sidebarData={isOpen} updateSidebarData={updateSidebarData} />
<div className={`w-full h-full flex flex-col overflow-hidden`}>
<Breadcrumb />
{children}
</div>
</div>
</SidebarProvider>
);
};