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";
import SidebarMobile from "./sidebar/sidebar-mobile";

interface Props {
  children: React.ReactNode;
}

export const AdminLayout = ({ children }: Props) => {
  const [isOpen, setIsOpen] = useState(false);
  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-auto md:!h-screen flex items-center flex-row !overflow-y-hidden">
        <Sidebar sidebarData={isOpen} updateSidebarData={updateSidebarData} />
        <SidebarMobile
          sidebarData={isOpen}
          updateSidebarData={updateSidebarData}
        />
        <div className={`w-full h-full flex flex-col  overflow-hidden`}>
          <Breadcrumb />
          {children}
        </div>
      </div>
    </SidebarProvider>
  );
};