1 files changed, 58 insertions, 4 deletions
diff --git a/src/renderer/editor/editor.tsx b/src/renderer/editor/editor.tsx
index fd8360a..2c57afc 100644
--- a/src/renderer/editor/editor.tsx
+++ b/src/renderer/editor/editor.tsx
@@ -1,10 +1,64 @@
 import * as React from 'react';
-import Button from '@material-ui/core/Button';
+
+import 'typeface-roboto';
+
+import { createMuiTheme, makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';
+
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Drawer from '@material-ui/core/Drawer';
+
+import { Library } from './library';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) => ({
+	root: {
+		display: 'flex',
+	},
+	drawer: {
+		width: drawerWidth,
+		flexShrink: 0,
+	},
+	drawerPaper: {
+		width: drawerWidth,
+	},
+	content: {
+		flexGrow: 1,
+		padding: theme.spacing(3),
+	},
+}));
+
+function EditorLayout(): JSX.Element {
+	const classes = useStyles();
+
+	return (
+		<div className={classes.root}>
+			<CssBaseline />
+			<Drawer
+				className={classes.drawer}
+				variant='permanent'
+				classes={{
+					paper: classes.drawerPaper,
+				}}
+				anchor='left'
+			></Drawer>
+			<main className={classes.content}>
+				<Library />
+			</main>
+		</div>
+	);
+}
+
+const theme = createMuiTheme({
+	palette: {
+		type: 'dark',
+	},
+});
 
 export function Editor(): JSX.Element {
 	return (
-		<Button variant='contained' color='primary'>
-			Hello World
-		</Button>
+		<ThemeProvider theme={theme}>
+			<EditorLayout />
+		</ThemeProvider>
 	);
 }