Responsive animation working

src/App.js

@@ -31,17 +31,22 @@ function App(){
 			transition: transitionWidth
 		},
 		"rightCol": {
-			width: "0",
 			overflow: "hidden",
+			width: "0",
 			height: "100vh",
 			transition: transitionWidth
 		},
 		"rightColShift": {
-			width: "50vw",
-			flexShrink: "0",
 			overflow: "auto",
+			width: "100vw",
+			flexShrink: "0",
 			transition: transitionWidth
-		}
+		},
+		[theme.breakpoints.up("md")]: {
+			"rightColShift": {
+				width: "40vw",
+			}
+		},
 	});
 
 	const classes = useStyles();
@@ -54,7 +59,7 @@ function App(){
 					<ItemTable activeItem={activeItem} setActiveItem={setActiveItem}/>
 				</Box>
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
-					<ItemView activeItem={activeItem}/>
+					<ItemView activeItem={activeItem} setActiveItem={setActiveItem}/>
 				</Box>
 			</Box>
 		</ThemeProvider>

src/ItemView.js

@@ -1,20 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider } from '@material-ui/core';
-import FolderIcon from '@material-ui/icons/Folder';
 import PersonIcon from '@material-ui/icons/Person';
 import CalendarIcon from '@material-ui/icons/CalendarToday';
 import AssignmentdIcon from '@material-ui/icons/AssignmentInd';
 import InfoIcon from '@material-ui/icons/Info';
 import ClockIcon from '@material-ui/icons/QueryBuilder';
+import ItemViewAppBar from './ItemViewAppBar'
 
 function ItemView(props){
 	return(
 		<Paper>
-			<ListItem>
-				<Typography variant="h4">
-					{props.activeItem["queue"] + " " + props.activeItem["number"]}
-				</Typography>
-			</ListItem>
+			<ItemViewAppBar 
+				title={props.activeItem["queue"] + " " + props.activeItem["number"]}
+				setActiveItem={props.setActiveItem}
+			/>
 
 			<ListItem>
 				<Typography variant="h5">

src/ItemViewAppBar.js

@@ -0,0 +1,39 @@
+import React from "react";
+import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core"
+import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
+
+
+export default function ItemViewAppBar(props){
+	const useStyles = makeStyles((theme) => ({
+		closeButton: {
+			marginRight: theme.spacing(2),
+		},
+		title: {
+			flexGrow: "1"
+		},
+	}));
+
+	const classes = useStyles(props.theme);
+
+	return(
+		<>
+			<AppBar position="sticky" color="secondary" elevation={0}>
+				<Toolbar>
+                    <Tooltip title={"Close Item"} 
+						arrow 
+						onClick={() => props.setActiveItem({})}
+						TransitionComponent={Zoom}
+					>
+						<IconButton color="inherit" className={classes.closeButton}>
+							<CloseItemViewIcon />
+						</IconButton>
+					</Tooltip>
+
+					<Typography variant="h6" className={classes.title}>
+						{props.title}
+					</Typography>
+				</Toolbar>
+			</AppBar>
+		</>
+	);
+}