54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
// interface Props {
|
|
// children: React.ReactNode;
|
|
// }
|
|
import React, { ReactNode } from "react";
|
|
import { SidebarProvider } from "./sidebar-context";
|
|
import { Breadcrumbs } from "./breadcrumbs";
|
|
import { BurgerButtonIcon } from "../icons";
|
|
import { RetractingSidebar } from "../landing-page/retracting-sidedar";
|
|
|
|
export const AdminLayout = ({ children }: { children: ReactNode }) => {
|
|
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">
|
|
<RetractingSidebar
|
|
sidebarData={isOpen}
|
|
updateSidebarData={updateSidebarData}
|
|
/>
|
|
<div className={`w-full h-full flex flex-col overflow-hidden`}>
|
|
<div className="flex justify-between border-b-2 dark:border-b-2 items-center dark:bg-black dark:border-white">
|
|
<Breadcrumbs />
|
|
<button
|
|
className="md:hidden items-center pr-4 justify-center h-10 w-10 flex z-50 text-zinc-700"
|
|
onClick={() => updateSidebarData(true)}
|
|
>
|
|
<BurgerButtonIcon />
|
|
</button>
|
|
</div>
|
|
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</SidebarProvider>
|
|
);
|
|
};
|