43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { Box, Toolbar, IconButton, Typography } from "@mui/material";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import { SideMenu } from "./SideMenu";
|
|
import type { ResourceConfig } from "../types";
|
|
|
|
interface LayoutProps {
|
|
resources: ResourceConfig[];
|
|
basePath: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function Layout({ resources, basePath, children }: LayoutProps) {
|
|
const [mobileOpen, setMobileOpen] = React.useState(false);
|
|
|
|
return (
|
|
<Box sx={{ display: "flex", minHeight: "calc(100vh - 128px)" }}>
|
|
<SideMenu
|
|
resources={resources}
|
|
basePath={basePath}
|
|
mobileOpen={mobileOpen}
|
|
onClose={() => setMobileOpen(false)}
|
|
/>
|
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
|
<Toolbar>
|
|
<IconButton
|
|
color="inherit"
|
|
edge="start"
|
|
onClick={() => setMobileOpen(true)}
|
|
sx={{ mr: 2, display: { md: "none" } }}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" noWrap sx={{ display: { md: "none" } }}>
|
|
Admin Panel
|
|
</Typography>
|
|
</Toolbar>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|