45 lines
994 B
TypeScript
45 lines
994 B
TypeScript
import { Sidebar } from "@/Components/sidebar";
|
|
import { Outlet } from "react-router";
|
|
import Stack from "@mui/material/Stack";
|
|
import { useMediaQuery } from "@mui/material";
|
|
import { useSidebar } from "@/Hooks/useSidebar";
|
|
|
|
import { useTheme } from "@mui/material";
|
|
|
|
const RootLayout = () => {
|
|
const theme = useTheme();
|
|
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
|
const { collapsedWidth } = useSidebar();
|
|
|
|
return (
|
|
<Stack flexDirection="row">
|
|
<Sidebar />
|
|
<Stack
|
|
flex={1}
|
|
padding={6}
|
|
overflow={"hidden"}
|
|
sx={{
|
|
backgroundColor:
|
|
theme.palette.mode === "dark"
|
|
? "rgba(255, 255, 255, 0.01)"
|
|
: "rgba(0, 0, 0, 0.01)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
paddingLeft: isSmall ? `${collapsedWidth + 12}px` : 12,
|
|
}}
|
|
>
|
|
<Stack
|
|
maxWidth={1280}
|
|
width="100%"
|
|
paddingY={theme.spacing(6)}
|
|
flex={1}
|
|
>
|
|
<Outlet />
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default RootLayout;
|