import { Box, useTheme } from "@mui/material";
import { HeaderBar } from "../HeaderBar/HeaderBar";

export const Layout = () => {
  // contexts
  const theme = useTheme();

  return (
    <Box
      sx={{
        backgroundColor: theme.palette.background.default,
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      <HeaderBar />
      <Box
        sx={{
          display: "flex",
          flexGrow: 1,
          overflow: "auto",
          p: 1,
        }}
      ></Box>
    </Box>
  );
};