From 82a18f2d68ff632b3915c24f00dd2a0eafdcb128 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campbell.justin.tyler@gmail.com>
Date: Tue, 11 Aug 2020 12:03:04 -0400
Subject: [PATCH] Responsive animation working

---
 src/App.js            | 15 ++++++++++-----
 src/ItemView.js       | 13 ++++++-------
 src/ItemViewAppBar.js | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 src/ItemViewAppBar.js

diff --git a/src/App.js b/src/App.js
index 90df0fa..f27b087 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/ItemView.js b/src/ItemView.js
index f375698..3d39e7e 100644
--- a/src/ItemView.js
+++ b/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">
diff --git a/src/ItemViewAppBar.js b/src/ItemViewAppBar.js
new file mode 100644
index 0000000..2c9e5ab
--- /dev/null
+++ b/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>
+		</>
+	);
+}
\ No newline at end of file