1 files changed, 62 insertions, 0 deletions
diff --git a/src/login/LoginLayout.jsx b/src/login/LoginLayout.jsx
new file mode 100644
index 00000000..8f2ee6ca
--- /dev/null
+++ b/src/login/LoginLayout.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { useMediaQuery, Paper } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useTheme } from '@mui/material/styles';
+import LogoImage from './LogoImage';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    height: '100%',
+  },
+  sidebar: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: theme.palette.primary.main,
+    paddingBottom: theme.spacing(5),
+    width: theme.dimensions.sidebarWidth,
+    [theme.breakpoints.down('lg')]: {
+      width: theme.dimensions.sidebarWidthTablet,
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '0px',
+    },
+  },
+  paper: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)',
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(0, 25, 0, 0),
+    },
+  },
+  form: {
+    maxWidth: theme.spacing(52),
+    padding: theme.spacing(5),
+    width: '100%',
+  },
+}));
+
+const LoginLayout = ({ children }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+
+  return (
+    <main className={classes.root}>
+      <div className={classes.sidebar}>
+        {!useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.secondary.contrastText} />}
+      </div>
+      <Paper className={classes.paper}>
+        <form className={classes.form}>
+          {children}
+        </form>
+      </Paper>
+    </main>
+  );
+};
+
+export default LoginLayout;