Initial stateful ItemView openning

src/App.js

@@ -1,31 +1,62 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
-import { Grid } from "@material-ui/core"
+import { Box, makeStyles } from "@material-ui/core";
 import CustomAppBar from "./CustomAppBar";
 import ItemTable from "./ItemTable";
-import ItemView from "./ItemView"
+import ItemView from "./ItemView";
+import clsx from "clsx";
+import { objectIsEmpty }  from "./utilities"
 
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
-	const [activeItem, setActiveItem] = useState({})
+	const [activeItem, setActiveItem] = useState({});
+	const sidebarOpen = !objectIsEmpty(activeItem);
 
 	const theme = createMuiTheme({
 		"palette": {
 			"type": darkMode ? "dark" : "light",
 		}
-	})
+	});
+
+	const transitionWidth = theme.transitions.create(["width"], {
+		duration: theme.transitions.duration.enteringScreen,
+		easing: theme.transitions.easing.easeInOut
+	});
+
+	const useStyles = makeStyles({
+		"leftCol": {
+			overflow: "auto",
+			width: "100vw",
+			height: "100vh",
+			transition: transitionWidth
+		},
+		"rightCol": {
+			width: "0",
+			overflow: "hidden",
+			height: "100vh",
+			transition: transitionWidth
+		},
+		"rightColShift": {
+			width: "50vw",
+			flexShrink: "0",
+			overflow: "auto",
+			transition: transitionWidth
+		}
+	});
+
+	const classes = useStyles();
 
 	return (
 		<ThemeProvider theme={theme}>
-			<CustomAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-			<Grid container>
-				<Grid item xs={6} md={8}>
+			<Box display="flex">
+				<Box className={classes.leftCol} >
+					<CustomAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
 					<ItemTable activeItem={activeItem} setActiveItem={setActiveItem}/>
-				</Grid>
-				<Grid item xs={6} md={4}>
+				</Box>
+				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 					<ItemView activeItem={activeItem}/>
-				</Grid>
-			</Grid>
+				</Box>
+			</Box>
 		</ThemeProvider>
 	);
 }