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

"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="flex items-center justify-between h-screen p-4">
        <Sidebar sidebarData={isOpen} updateSidebarData={updateSidebarData} />
        <div className={`h-full w-full flex flex-col gap-4`}>
          <Breadcrumb />
          {children}
        </div>
      </div>
    </SidebarProvider>
  );
};